jQuery停止nth-child选择子嵌套元素答案

【问题标题】：jQuery stop nth-child selecting child nested elementsjQuery停止nth-child选择子嵌套元素
【发布时间】：2015-01-28 15:20:03
【问题描述】：

用 jQuery 构建 A/B 测试，原始页面中的 HTML 结构是：

<div>
    <ul>
        <li>
            <ul>
                <li>

但是当我使用 div ul li:nth-child(1).addClass("test");它将该类添加到所有 'li' 元素中..

如何停止将类添加到所有 li 元素并仅将其保留到第一个 li？

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

使用direct child selector:

div ul > li:nth-child(1).addClass("test");

【讨论】：

【解决方案2】：

您应该在div 元素上使用jQuery's children() method 来选择ul 元素，它是该div 的直接子元素。然后您可以使用find() 拉取:first li 元素。

$('div').children('ul').find('li:first').addClass('test')

或者您可以使用jQuery's first() method 代替它的:first 选择器：

$('div').children('ul').find('li').first().addClass('test')

演示

$('div').children('ul').find('li:first').addClass('test')

.test {
  border: 1px solid #f00;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <ul>
        <li>
          Not-nested List Item (should have border)
            <ul>
                <li>
                  Nested List Item (should not have border)
                </li>
            </ul>
        </li>
    </ul>
</div>

【讨论】：

啊，谢谢伙计们，这很有意义，而且工作起来就像做梦一样。再次感谢
请注意，此模式不适用于多个列表。 nth-child 会是更好的选择。