2012-08-08 13 views
9

Jak dodać klasę do elementu z określonym indeksem?Jak dodać klasę do pierwszego dziecka z jQuery?

próbuję to teraz co powinno wpłynąć na pierwszy element (nie działa tak)

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

Ale chcę móc zmienić klasę dowolnego elementu w Jest to zbiornik o indeks.

EG jeśli chcę zmodyfikować elementu o indeksie = 2.

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

powinien stać:

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

Odpowiedz

21

Zastosowanie :first selektor:

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

i trzeciego wyboru elementu , możesz użyć metody each(): Here is jsFiddle.

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

czy można to zrobić z eq metody jak Jamiec & MrThys wymienionych: ale każda metoda będzie znacznie przydatna, gdy coś zaczyna skomplikowane.

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

eq selector

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

lub eq function

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

To byłoby bardziej efektywne użycie [ '.eq()' metoda] (http://api.jquery.com/ eq /), ponieważ selektor jest rozszerzeniem jQuery, a nie częścią CSS. –

4

Najczystsze sposobem osiągnięcia tego byłoby:

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

Dokumentacja sposobu .eq może b e znajduje się tutaj: http://api.jquery.com/eq/

2

Użyj: selektora pierwszego lub selektora: n-sety. Wspominam o selektorze n-dzieci, na wypadek gdybyś chciał dodać klasy do czegokolwiek innego niż pierwszy. Można również użyć: nth-child w czystym CSS bez javascript jeśli chcesz

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