使用jQuery选择一个具有特定类但没有另一个类的div

Question

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

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

...

如何选择所有fuu，除了那些带有.no类的元素？

- Alex

Answer 1

使用 :not() 选择器来排除其他的 class：

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

- BoltClock

---

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

我对额外的小费给予+1的赞同，而且到目前为止，+8的反馈表明“一些”开发人员确实关心性能 :-) - Mario Awad

我无法让以下代码起作用：$("#mydiv .fuu:not(.no)").click(function(){console.log('test');});。我花了很长时间搜索与 not() 相关的问题，最终发现问题在于 active 类是动态添加的。我必须像这样做：$("#mydiv").on('click', '.fuu:not(.no)', function(){console.log('test');});。由于我一直在这里挖掘，认为 not() 不起作用，我想在此处留下评论，以帮助其他人。 - fpierrat

如果你需要排除多个类，语法如下：$('.aaa:not(.bbb):not(.ccc)')。这将获取所有具有类aaa但不具有类bbb或ccc的内容。 - Kip

Answer 2

您也可以使用类似以下内容来过滤掉 '.no' 类：

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

- Joey C.

Answer 3

我在添加了另一组引号后才使第一个答案能够正常工作，这使我得到了所需的结果，即选择排除第二个类的类。

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

- David Botsko

Answer 4

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

- Sourav

---

如果有一个<div class="fuu yes">，它没有no类，但是对于.attr('class') == 'fuu'会返回false，那怎么办？ - BoltClock