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

实例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

对我而言，最好的方法是

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

但是可以使用它:(只有当#menu ul是页面的第一个ul时）

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

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

2 个答案: