jQuery选择一个具有某个类的div，它没有另一个类

Posted 2023-03-05

【中文标题】jQuery选择一个具有某个类的div，它没有另一个类

【英文标题】：jQuery select a div with a certain class, that doesn't have another class

【发布时间】：2011-07-29 15:29:39

【问题描述】：

<div class="fuu">
  ...
</div>

<div class="fuu no">
  ...
</div>

...

除了具有.no 类的fuu 之外，我如何选择所有fuu？

【参考方案1】：

使用:not() 排除其他类：

$('.fuu:not(.no)')

【讨论】：

一个小花絮：.fuu:not(.no) 也是一个有效的 CSS3 选择器，并且将匹配支持 :not() 的浏览器上的相同元素。因此，我相信 jQuery 会将这个选择器交给querySelectorAll()，而不是依赖于那些浏览器的Sizzle，从而提高这些浏览器的性能。当然，没有人在乎 :)

+1 来自我的额外提示，到目前为止 +8 似乎“一些”开发人员确实关心性能:-)

我无法进行以下工作：$("#mydiv .fuu:not(.no)").click(function()console.log('test'););。找了半天找一个not()相关的问题，最后还是因为active这个类是动态添加的。我必须这样做：$("#mydiv").on('click', '.fuu:not(.no)', function()console.log('test'););。由于我一直在这里挖掘，认为not() 不起作用，我认为在这里发表评论可能对其他人有所帮助。

如果需要排除多个类，语法如下：$('.aaa:not(.bbb):not(.ccc)')。这将得到所有具有aaa 类但不具有bbb 类或 ccc

的东西

【参考方案2】：

您还可以使用以下内容过滤掉“.no”类：

$('.fuu').not('.no');

【参考方案3】：

在我添加另一组引号之前，我无法获得第一个工作答案。这给了我选择排除第二类的类的预期结果。

$(".fuu:not('.no')").hide();

【参考方案4】：

获取div的类名，如果类名中有SPACE则表示它有多个类！

【讨论】：

如果有<div class="fuu yes"> 怎么办？它没有 no 类，但它会为 .attr('class') == 'fuu' 返回 false。