jQuery selector not logical

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') 

Вместо добавления класс «что-то 4» Ли тег, он добавляет его к «югу-то 3» Ли тегов.

Почему?

Answer 1

Вы выбираете все li-теги по дереву.

Вы можете попробовать это:

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

Таким образом, вы только выбрать прямые дочерние узлы предыдущего узла.

Answer 2

li:last обрабатывается слева направо. Сначала выбираются все элементы li, которые являются потомками ul. Поскольку вы используете descendant selector, а не дочерний селектор, этот включает в себя все элементы «sub» li. :last затем выбирает последний из них для отображения в документе, который равен sub something 3.

Вы должны использовать вместо child selector:

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