jquery - 如果孩子没有特定的类，则选择一个元素

Question

我正在寻找一个仅使用选择器的解决方案，而不是使用//Returns 1 for CCW, -1 for CW, 0 for no change private int Direction(Point from, Point to) { double cross = (from.x * to.y) - (from.y * to.x); return Math.Sign(cross); } 或其他jquery函数。

我徘徊为什么如果我.find()，如果他们的一个孩子有$('.parentClass:has(".childrenClass")')

，它会返回元素

但如果我.childrenClass，即使其中一个孩子有$('.parentClass:not(".childrenClass")')

，它也会返回所有元素

是否有办法在所有孩子都没有特定班级的情况下选择元素？

Answer 1

  

我徘徊为什么如果我做$（'。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>