jquery - 仅使用选择器选择元素，除非它具有给定类的祖先

Question

假设我有以下 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 元素，这些元素不是具有类 foo 的元素的后代。我知道我可以用奇特的方式做到这一点filter function ，但我想知道我是否可以只用一个选择器来做到这一点。我首先尝试:

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

不幸的是，这不起作用，因为li有其他祖先没有样式(在本例中为ul)。以下似乎有效；

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

换句话说，选择没有祖先且具有类 foo 或具有自己的祖先类 foo 的所有 li 元素>。也许这是使用选择器执行此操作的最佳/唯一方法，但我对 :not 选择器的重复并不感到兴奋。还有更好的想法吗？

fiddle

Answer 1

你可以这样做

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

http://jsfiddle.net/y7s54/

或

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

http://jsfiddle.net/QpCYY/

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