¿Cómo agregar clases al primer hijo con jQuery?

Question

¿Cómo agrego una clase un elemento en un contenedor con un cierto índice?

estoy tratando esto ahora que debería afectar el primer elemento (no funciona de todos modos)

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

Pero yo quiero ser capaz de cambiar la clase de cualquier elemento en su contenedor que tiene el índice.

por ejemplo, si quiero modificar elemento con índice = 2.

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

debe convertirse en:

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

Answer 1

Uso :first selector:

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

y para la tercera selección de elementos , puede usar el método each(): Here is jsFiddle.

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

o se puede hacer esto con el método eq como Jamiec & MrThys mencionados: pero cada método será mucho más útil cuando las cosas se complican.

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

Answer 2

eq selector

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

o eq function

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

Answer 3

la manera más limpia de lograr esto sería:

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

Documentación sobre el método .EQ puede b e encontrado aquí: http://api.jquery.com/eq/

Answer 4

Utilice el: primer selector, o el selector: n-child. Menciono el selector nth-child simplemente en caso de que quiera agregar clases a algo que no sea el primero. También puede utilizar: nth-child en CSS plano sin JavaScript si desea

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