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

I am looking for a selector only solution, not something using .find() or other jquery functions.

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

I wander why if I do $('.parentClass:has(".childrenClass")'), it returns elements if one of their children has .childrenClass

我徘徊为什么如果我做$('。parentClass:has(“。childrenClass”)'),如果他们的一个孩子有.childrenClass,它会返回元素

but if I do $('.parentClass:not(".childrenClass")') it returns all elements even if one of their children has .childrenClass

但是如果我做$('。parentClass:not(“。childrenClass”)')它会返回所有元素,即使他们的一个孩子有.childrenClass

Is there a way to select element only if all of their children have not a specific class?

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

1 个解决方案

#1

I wander why if I do $('.parentClass:has(".childrenClass")'), it returns elements if one of their children has .childrenClass but if I do $('.parentClass:not(".childrenClass")') it returns all elements even if one of their children has .childrenClass

我徘徊为什么如果我做$('。parentClass:has(“。childrenClass”)'),如果他们的一个孩子有.childrenClass但是如果我做$('。parentClass:not(“。childrenClass”),它会返回元素')它返回所有元素,即使他们的一个孩子有.childrenClass

Because :not(".childrenClass") is not remotely the opposite of :has(".childrenClass"). :not tests whether that element doesn't match the selector. :has tests whether that element's children match the selector.

因为:not(“。childrenClass”)与远程相反:has(“。childrenClass”)。 :不测试该元素是否与选择器不匹配。 :测试该元素的子元素是否与选择器匹配。

Is there a way to select element only if all of their children have not a specific class?

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

Yes, you can combine :not and :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>

I have to admit that really surprised me, as :has has a history of not playing nicely with others. Previously, I thought you'd have to use 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>

#1