특정 클래스가없는 자식 요소가있는 요소 목록 선택

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 대답입니다. 참고로

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