Добавить элемент к другому ребенку, если родитель не содержит

Question

Как я могу проверить каждый div.item, чтобы увидеть, если он делает не содержать span.premium, а затем добавить новый срок (давайте называть это span.free) в div.screenshot?

<div id="video1" class="item"> 
 
    <div class="screenshot"> 
 
    <img src="image1.png" /> 
 
    </div> 
 
    <h3>I am Video 1</h3> 
 
</div> 
 
<div id="video2" class="item"> 
 
    <div class="screenshot"> 
 
    <img src="image2.png" /> 
 
    </div> 
 
    <h3>I am Video 2 <span class="premium">P</span></h3> 
 
</div> 
 
<div id="video3" class="item"> 
 
    <div class="screenshot"> 
 
    <img src="image3.png" /> 
 
    </div> 
 
    <h3>I am Video 3</h3> 
 
</div>

Answer 1

С одной строки кода:

$('div.item:not(:has(span.premium))').find('.screenshot').append('<span class="free">NEW SPAN</span>'); 

DEMO: https://jsfiddle.net/wxL2ujf8/

Answer 2

Вы можете использовать :has(), :not() и each() как

$('div.item:not(:has(span.premium))').each(function(){ 
    $('div.screenshot').append('<span class="free"></span>') 
});