問題子どもがいる要素だけを選択する場合

Question

このデモを見て、の子どもの下の<li>にすべて<i class="red"> + </i>を追加するコードを教えてください。私は何をしたいのは、単に<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

を追加している（S） <li>に +を追加して

$(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要素の子孫であるすべてのスパン要素を探しているからです。説明で述べたようにhere

次のソリューションを使用すると、li要素のちょうど子供 Demo here