jquery - jQuery-如果 child 没有特定的类(class)，则选择一个元素

我正在寻找仅选择器的解决方案，而不是使用.find()或其他jquery函数的解决方案。

我徘徊为什么我执行$('.parentClass:has(".childrenClass")')时，如果他们的一个孩子有.childrenClass，它将返回元素

但是如果我执行$('.parentClass:not(".childrenClass")')，即使他们的一个孩子有.childrenClass，它也会返回所有元素

仅当所有子级都不都是特定类时，才可以选择元素吗？

最佳答案

我徘徊为什么如果我执行$（'。parentClass：has（“。childrenClass”）'），如果他们的一个孩子具有.childrenClass，但如果我执行$（'。parentClass：not（“。childrenClass”），它将返回元素'）它返回所有元素，即使他们的一个孩子有.childrenClass


因为:not(".childrenClass")远不是:has(".childrenClass")的对立面。 :not测试该元素是否与选择器不匹配。 :has测试该元素的子元素是否与选择器匹配。


  仅当所有子级都不都是特定类时，才可以选择元素吗？


是的，您可以结合使用:not和:has：

$(".parentClass:not(:has(.childrenClass))").css("background-color", "yellow");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parentClass">
  Should match, no children with childrenClass
</div>
<div class="parentClass">
  Should match,
  <span>no children with childrenClass</span>
</div>
<div class="parentClass">
  Shouldn't match,
  <span class="childrenClass">has children with childrenClass</span>
</div>
<div class="parentClass">
  Shouldn't match,
  <span class="childrenClass">has children</span>
  <span class="childrenClass">with childrenClass</span>
</div>

我必须承认，这确实让我感到惊讶，因为:has的历史不佳。以前，我认为您必须使用filter：

$(".parentClass").filter(function() {
  return $(this).find(".childrenClass").length == 0;
}).css("background-color", "yellow");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parentClass">
  Should match, no children with childrenClass
</div>
<div class="parentClass">
  Should match,
  <span>no children with childrenClass</span>
</div>
<div class="parentClass">
  Shouldn't match,
  <span class="childrenClass">has children with childrenClass</span>
</div>
<div class="parentClass">
  Shouldn't match,
  <span class="childrenClass">has children</span>
  <span class="childrenClass">with childrenClass</span>
</div>