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

Question

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

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

但是当我使用div ul li：nth-​​child（1）.addClass（＆＃34; test＆＃34;）;它将所有课程添加到所有人的课程中。元件..

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

Answer 1

使用direct child selector：

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

Answer 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')

演示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;