特定のクラスを持たない子要素を持つ要素のリストを選択

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()の方法は、@Jai答えとして使用することができますが。 FYI

$('.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>

：>(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>