选择具有子元素而没有特定类别的元素列表

Question

<div class="wrapper"> 
    <div class="A B"> 
    <span class="C">needed</span> 
    </div> 
    <div class="A B"> 
    <span class="D">not needed</span> 
    </div> 
    <div class="A B"> 
    <span class="E">needed</span> 
    </div> 
</div> 

我需要所有没有子类型为“D”的子元素的div元素。有没有这个操作的jQuery选择器？

Answer 1

您可以使用:has()和:not()伪类选择组合。其中:has()可用于检查包含任何特定元素的选定元素，然后使用:not()选择器筛选出它们。虽然filter()方法可以使用在@佳答案。

$('.A.B:not(:has(>.D))').css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="A B"> 
 
    <span class="C">needed</span> 
 
    </div> 
 
    <div class="A B"> 
 
    <span class="D">not needed</span> 
 
    </div> 
 
    <div class="A B"> 
 
    <span class="E">needed</span> 
 
    </div> 
 
</div>

FYI：凡>(children selector)使用检查直接孩子，否则可能会检查嵌套，这样就可以避免，如果它不是一个问题。

Answer 2

您可以使用.filter()：

var divs = $('.A.B').filter(function(){ 
 
    return $(this).children('span.D').length === 0; 
 
}); 
 

 
console.log(divs.text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="A B"> 
 
    <span class="C">needed</span> 
 
    </div> 
 
    <div class="A B"> 
 
    <span class="D">not needed</span> 
 
    </div> 
 
    <div class="A B"> 
 
    <span class="E">needed</span> 
 
    </div> 
 
</div>