检查div是否有class，如果有，则addClass到不同的div答案

【问题标题】：Check to see if div hasClass, if yes, then addClass to a different div检查div是否有class，如果有，则addClass到不同的div
【发布时间】：2014-01-09 17:23:04
【问题描述】：

我有一个可以使用 jqueryui 选择的项目列表。我正在尝试检查是否选择了一个项目，如果是，则将一个类添加到不同的 div。

HTML：

<div class="container">
  <ul id="selectable">
   <li id="object1" class="ui-selected">Object 1</li>
   <li id="object2">Object 2</li>
   <li id="object3">Object 3</li>
   <li id="object4">Object 4</li>
   <li id="object5">Object 5</li>
   <li id="object6">Object 6</li>
  </ul>
</div>

<div id="otherObject"></div>

CSS：

#object1, #object2, #object3, #object4, #object5, #object6 {
   width:100px;
   height:100px;
}
#otherObject {
   width:100px;
   height:100px;
   position:relative;
   top: 0px;
}
#otherObject.newClass {
   top: 50px;
}

jQuery:

$('#object1').click(function(){
 if ($('#object1').hasClass('ui-selected')){
     $('#otherObject').addClass('newClass');
    }
});

非常感谢任何帮助。我确定我缺少一些简单的东西。谢谢！

【问题讨论】：

什么不起作用，问题是什么？
看起来工作正常 jsfiddle.net/fenderistic/J9dUJ ，有什么问题？
您拥有的这段代码似乎运行良好。我不确定您为什么会遇到问题。您的 jQuery 是否正确加载。在这里工作：jsfiddle.net/gL9yf
我不确定。它以前对我不起作用。也许在完整版中我与其他代码有冲突。不过还是谢谢。

标签： javascript jquery jquery-ui addclass

【解决方案1】：

其实用is()是slightly quicker，而不是hasClass()。下面的代码应该可以实现你想要的：

$('#object1').click(function(){
    if($(this).is('.ui-selected'))
    {
        $('#otherObject').addClass('newClass');
    }
});

请注意，您还需要将代码包装在 DOMReady 事件中，因此您的 jQuery 应该如下所示：

$(function() {  
    $('#object1').click(function(){
        if($(this).is('.ui-selected'))
        {
            $('#otherObject').addClass('newClass');
        }
    });
});

jsFiddle Demo

【讨论】：

当 OP 的代码不起作用时，它会起作用吗？它修复了什么？
我注意到您添加了 DOMReady，否则代码看起来还不错！
谢谢！很抱歉忘记了 DOMReady。像魅力一样工作。
@ryanproject 很高兴为您提供帮助。您可能愿意接受答案；）

【解决方案2】：

jQuery 遍历应该对此有所帮助。

$('#object1').click(function(){
 if ($('#selectable').children('.ui-selected').length >= 1){
     $('.ui-selected').next().addClass('newClass');
    }
});

【讨论】：

【解决方案3】：

只是想在 @BenM 答案中添加一些想法（我认为更正）。
（当然，没什么私人的，只是阅读您的 cmets 时想到的一些东西）

一个小修正：

其实使用 is() 比使用 hasClass()快一点。

你的例子：http://jsperf.com/hasclass-vs-is-stackoverflow/12
.hassClass() 和 .is() 之间的干净比较：http://jsperf.com/jquery-hasclass-vs-is

基于不同条件的测试无效。
.is() 在 OP 情况下实际上慢了 68%。

概念问题：

请注意，您还需要...

没有需要将.click() 事件包装在DOMready 中。这是一个选项，是的，一个有效的选项，但不是唯一的选项。

jQuery 函数需要，对象已经被渲染。

If .ready() is called after the DOM has been initialized, the new handler passed in will be executed immediately.
因此，另一个有效的选择是将脚本放在呈现的 HTML 之后，例如，放在文档的底部，在这种情况下，不需要将其包装在 .ready() 函数中。

一个好的做法：

使用可用的最新版本的 jQuery，或者推荐使用。

jsfiddle 示例使用的是 1.8.3 版本。

从那个版本到推荐版本有很多过时的功能，这可能会导致编程错误。

最后，自我推销作为公认的答案，我一点也不喜欢，但正如我所说..这只是我的意见。

【讨论】：