javascript - 选择执行 :not have a parent 的 jQuery 元素

Question

对于这个布局

<div class="foo">
  <div class="baz"></div>
</div>
<div class="bar">
  <div><div class="baz"></div></div>
</div>
<div class="baz"></div>

选择器选择所有 3 个 .baz 元素:

$(':not(.foo, .bar) .baz');

我希望它只选择没有 .foo 或 .bar 父级的 .baz。

它有什么问题，如何解决？

我想选择器效率不高，但它的效率不是优先考虑的。如何重写它才能更有效率？

Answer 1

您的 :not 解决方案不起作用，因为它匹配所有 .baz 元素，因为 html、body，可能还有一些是 :not(.foo, .bar) 但是所有 .baz 元素的祖先。

改为:

$(".baz").not(".bar .baz").not(".foo .baz")

例子:

console.log($(".baz").not(".bar .baz").not(".foo .baz").length);

<div class="foo">
  <div class="baz"></div>
</div>
<div class="bar">
  <div>
    <div class="baz"></div>
  </div>
</div>
<div class="baz"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>