如何使用jQuery將類添加到第一個孩子？

Question

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

我想這個現在應該影響的第一個元素（不反正工作）

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

但我希望能夠改變它的具有指數容器中的任何元素的類。

例如，如果我想用指數來修改元素= 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'); 
    } 
}); 

，或者你可以用eq方法就像提到Jamiec & MrThys做到這一點：但每個方法會更加有用，當事情變得複雜。

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

Answer 2

eq selector

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

或eq function

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

Answer 3

實現這一點的最乾淨的方法是：在.EQ方法

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

文檔可以b e在這裏找到：http://api.jquery.com/eq/

Answer 4

使用：第一個選擇器或：第n個子選擇器。我提到了：nth-​​child選擇器，以防您想將類添加到第一個以外的任何其他類。如果你想要，你也可以使用：nth-​​child在純CSS無javascript的情況下

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