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');

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

它有什么问题以及如何解决？

我认为选择器效率不高，但效率不是优先考虑的问题。怎样才能改写它以提高效率？

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>

选择具有以下功能的jQuery元素：没有父元素

1 个答案: