22

假设我有以下 HTML：

<div class="foo">
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div> <!-- not originally here -->
<div class="bar">
  <ul>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

我想选择所有不是li具有 class 的元素的后代的元素。我知道我可以用一个花哨的过滤功能来做到这一点，但我想知道我是否可以只用一个选择器来做到这一点。首先我试过：foo

$(":not(.foo) li")

不幸的是，这不起作用，因为它li有其他没有样式的祖先（ul在这种情况下）。以下似乎有效；

$(":not(.foo) :not(.foo) li")

换句话说，选择所有li没有祖先的元素，这些元素要么有类，要么有foo自己的祖先类foo。也许这是使用选择器的最佳/唯一方法，但我对:not选择器的重复并不感到兴奋。那里有更好的想法吗？

小提琴

4

5 回答 5

31

你可以这样做

$("li").not('.foo li')

http://jsfiddle.net/y7s54/

或者

$("li:not(.foo li)")

http://jsfiddle.net/QpCYY/

选择所有没有类 foo 的祖先的 li

于 2012-12-14T15:16:33.403 回答
4

试试li:not(.foo > ul > li)；选择所有 lis 减去父级 .foo 两级以上的那些。

于 2012-12-14T15:11:56.263 回答
2

您可以使用上下文以及下面的选择器来执行此操作，

$('li', $('div:not(.foo)'))

现场演示

$('li', $('div:not(.foo)')).each(function(){
    alert($(this).text());
});​
于 2012-12-14T15:15:04.233 回答
0

我认为这个解决方案看起来更好一些，但是关于速度差异的 API 评论存在一些争议。

$("li").not(".foo li")

小提琴

于 2012-12-14T15:23:52.860 回答
0

这个怎么样：

$("li:not(.foo > li)")

如果这不起作用，文档中的注释非常有用：

http://api.jquery.com/not-selector/

于 2012-12-14T15:11:42.563 回答