javascript - 如何使用 jQuery 向第一个孩子添加类？

Question

如何在具有特定索引的容器上添加类元素？

我现在正在尝试这个应该影响第一个元素（无论如何都不起作用）

$('#resultsBox li:first-child').addClass('aaaa');

但我希望能够更改具有索引的容器中任何元素的类。

EG 如果我想修改 index = 2 的元素。

<div id="resultsBox">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

应该变成：

<div id="resultsBox">
<ul>
<li></li> // Index 0
<li></li> // Index 1
<li class="selected"></li> // Index 2
</ul>
</div>

Answer 1

使用:first选择器：

$('#resultsBox li:first').addClass('aaaa');

对于第三个元素选择，您可以使用each()方法： 这里是 jsFiddle。

$('ul li').each(function(i) {
    if ( i === 2 ) {
       $(this).addClass('aaaa');
    }
});

或者您可以使用 Jamiec 和 MrThys 提到的eq方法来做到这一点：但是当事情变得复杂时，每种方法都会非常有用。

$('#resultsBox li').eq(2).addClass('aaaa');

Answer 2

实现这一目标的最干净的方法是：

$('#resultsBox li').eq(2).addClass('selected');

.eq 方法的文档可以在这里找到：http: //api.jquery.com/eq/

Answer 3

使用 :first 选择器或 :nth-child 选择器。我提到 :nth-child 选择器只是为了以防你想将类添加到除第一个之外的任何东西。如果需要，您还可以在没有 javascript 的纯 CSS 中使用 :nth-child

$("#resultBox li:nth-child(1)").addClass('aaa');

Answer 4

对于选择 ul

$("#resultsBox ul").first().addClass( "aaaa" );

对于选择第一个 li

$("#resultsBox ul li").first().addClass( "aaaa" );

Answer 5

eq selector

$('#resultsBox li:eq(2)').addClass('aaaa');

或者eq function

$('#resultsBox li').eq(2).addClass('aaaa');