jquery - выберите элемент, если дети не имеют определенного класса

Question

Я ищу решение только для селектора, а не что-то, используя .find() или другие функции jquery.

брожу почему, если я $('.parentClass:has(".childrenClass")'), он возвращает элементы, если один из детей имеет .childrenClass

, но если я $('.parentClass:not(".childrenClass")') возвращает все элементы, даже если один из их детей имеет .childrenClass

Есть ли способ выбора элемента, только если у всех их детей нет определенного класса?

Answer 1

брожу почему, если я $ (»ParentClass:. Есть ("childrenClass.") '), Она возвращает элементы, если один из детей имеет .childrenClass, но если я $ (' ParentClass:. Не («.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>