jQueryセレクタが論理でない

Question

特定のli要素を順序付けられていないリストで選択する際に問題が発生しました。それは大きな問題ではありませんが、私はそれを回避する方法を見つけることができますが、私は本当にそれが動作していない理由を知りたいです。

マイHTML：

<div id="myList"> 
    <ul> 
     <li>something 1</li> 
     <li>something 2</li> 
     <li>something 3</li> 
     <li>something 4 
      <ul> 
       <li>sub something 1</li> 
       <li>sub something 2</li> 
       <li>sub something 3</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

私の問題はこれです：

$('#myList ul:first li:first').addClass('cool') 

これは "何か1" 李タグにクラスを追加します。すべての井戸と良い。しかし：

$('#myList ul:first li:last').addClass('cool') 

"something 4" liタグにクラスを追加するのではなく、 "sub something 3" liタグに追加します。

なぜですか？

Answer 1

すべてのliタグをツリーの下に選択しています。

あなたはこれをしようとする場合があります：

$('#myList ul:first>li:last').addClass('cool') 

そのようにあなただけの前のノードの直接の子ノードを選択します。

Answer 2

li:lastは、左から右に処理されます。まず、ulの子孫であるすべてのli要素が選択されます。子セレクタではなくdescendant selectorを使用しているため、にはのすべての「サブ」li要素が含まれています。 :lastは、ドキュメントに最後に表示されるsub something 3を選択します。

代わりchild selectorを使用する必要があります。

$('#myList ul:first > li:last').addClass('cool')