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

이것은 "어떤 일"리튬 태그에 클래스를 추가합니다. 모두 좋고 좋아. 하지만 :

$('#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')