關於僅選擇有子女的元素的問題

Question

你可以看看這個演示，並讓我知道爲什麼代碼將<i class="red"> + </i>添加到所有<li> s下的子<ul>。我想這樣做只是增加+到<li>（S），它包含了一系列新的<ul>，但你可以看到它被添加到所有兒童

$(function() { 
 
    $('li:has(ul)').find('span').append('<i class="red"> + </i>'); 
 
    });

.red{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><span>Item 1</span></li> 
 
    <li><span>Item 2</span> 
 
    <ul> 
 
     <li><span>Item 2-1</span></li> 
 
     <li><span>Item 2-2</span></li> 
 
     <li><span>Item 2-3</span></li> 
 
     <li><span>Item 2-4</span></li> 
 
    </ul> 
 
    </li> 
 
    <li><span>Item 3</span></li> 
 
    <li><span>Item 4</span></li> 
 
</ul>

Answer 1

使用後代>選擇器：

$(function() { 
 
    $('body > ul > li:has(ul)').find('> span').append('<i class="red"> + </i>'); 
 
});

.red { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><span>Item 1</span></li> 
 
    <li><span>Item 2</span> 
 
    <ul> 
 
     <li><span>Item 2-1</span></li> 
 
     <li><span>Item 2-2</span></li> 
 
     <li><span>Item 2-3</span></li> 
 
     <li><span>Item 2-4</span></li> 
 
    </ul> 
 
    </li> 
 
    <li><span>Item 3</span></li> 
 
    <li><span>Item 4</span></li> 
 
</ul>

預覽

Answer 2

這是因爲.find正在尋找屬於li元素的後代的所有span元素。如在本說明書here

提到下面的解決方案是你在找什麼

$(function() { 
    $('li:has(ul)').children('span').append('<i class="red"> + </i>'); 
}); 

哪些目標li元素的只是孩子 Demo here