n 번째 자식 선택기 중첩 항목 선택을

Question

방지 I는 다음 구조를 갖는다 : 그것은 두 부품 (1)뿐만 아니라 아이템 2.1을 선택

$("ul li:nth-child(1)").addClass("someclass"); 

:

<ul id="menu"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a> 
     <ul> 
      <li><a href="#">Item 2.1</a></li> 
      <li><a href="#">Item 2.2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Item 3</a></li> 
    <li><a href="#">Item 4</a></li>   
</ul> 

I 다음 선택기를 사용

. 그러나 항목 1 만 선택하면됩니다. 내가 어떻게 해?

Answer 1

사용하십시오 child combinator보다는 >을 추가하여 descendant combinator 및 자격 대신 태그의 id 사용하여 ul :

$("#menu > li:nth-child(1)").addClass("someclass"); 
// ^--- ^--- here 

그 방법은, 그것은 단지 직접 아이들을 찾고, 그리고 단지의 #menu (다른 모든 것은 아닙니다 ul s).

라이브 예 :

$("#menu > li:nth-child(1)").addClass("someclass");

.someclass { 
 
    background-color: #eb0; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="menu"> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li><a href="#">Item 2</a> 
 
     <ul> 
 
      <li><a href="#">Item 2.1</a></li> 
 
      <li><a href="#">Item 2.2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Item 3</a></li> 
 
    <li><a href="#">Item 4</a></li>   
 
</ul>

Answer 2

나를 위해 가장 좋은 방법은

$("#menu > li:nth-child(1)").addClass("someclass"); 

이다 그러나 이것을 사용하는 것이 가능하다 : (#menu UL 첫 번째 UL 인 경우에만 페이지의)

$("ul li:first").addClass("someclass");