第n个孩子选择以防止嵌套项目选择

Question

我有以下结构：

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

当我使用以下的选择：

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

它同时选择第1项以及项目2.1。不过，我希望只选择第1项。我该怎么做？

Answer 1

使用child combinator而非descendant combinator通过添加>，并限定ul使用id代替标签：

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