选择元素,除非它只使用选择器具有给定类的祖先

时间:2012-12-14 15:05:26

标签: jquery jquery-selectors

假设我有以下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>

我想选择所有{em} 元素的li个元素,这些元素是类foo的元素的后代。我知道我可以用花哨的filter function做到这一点,但我想知道我是否可以只选择一个选择器。首先我试过了:

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

不幸的是,这不起作用,因为li其他祖先没有样式(在这种情况下为ul)。以下似乎有效;

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

换句话说,选择所有没有祖先的li元素,这些元素具有类foo或者具有类foo的祖先。也许这是使用选择器执行此操作的最佳/唯一方法,但我对:not选择器的重复感到不满。那里有更好的想法吗?

fiddle

5 个答案:

答案 0 :(得分:30)

你可以这样做

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

http://jsfiddle.net/y7s54/

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

http://jsfiddle.net/QpCYY/

选择所有没有类foo

的祖先的li

答案 1 :(得分:4)

尝试li:not(.foo > ul > li);选择所有lis减去父母.foo两个级别的那些。

答案 2 :(得分:2)

你可以使用上下文和选择器一起使用

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

<强> LIve Demo

$('li', $('div:not(.foo)')).each(function(){
    alert($(this).text());
});​

答案 3 :(得分:0)

这个怎么样:

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

如果不起作用,文档中的注释非常有用:

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

答案 4 :(得分:0)

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

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

fiddle