jquery - nth-child 选择器以防止嵌套项目选择

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通过添加 >，并使用 id 而不是标记来限定 ul:

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

这样，它只会查找直接子级，并且仅查找 #menu 的直接子级(而不是所有其他 ul)。

实例:

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