如何使用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()方法： Here is jsFiddle.

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

或者您可以使用像Jamiec＆amp ;;这样的 eq 方法执行此操作。 MrThys提到：但是当事情变得复杂时，每种方法都会非常有用。

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

Answer 2

实现这一目标的最简洁方法是：

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

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

Answer 3

使用：first selector或：nth-​​child选择器。我提到了：nth-​​child选择器，以防你想要将类添加到第一个以外的任何东西。如果你想要

，你也可以在没有javascript的普通CSS中使用：nth-​​child

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

Answer 4

eq selector

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

或eq function

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

Answer 5

对于选择ul

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

要选择第一个li

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