ajouter la classe nième enfant dynamiquement

Question

besoin d'ajouter dynamiquement la classe (par jQuery)

<ul> 
    <li class="green">Green</li> 
    <li class="red">red</li> 
    <li class="black">black</li> 

    <li class="">Green</li> 
    <li class="">red</li> 
    <li class="">black</li> 

    <li class="">Green</li> 
    <li class="">red</li> 
    <li class="">black</li> 

</ul> 

mon code

jQuery('ul').each(function(){ 
       jQuery(this).find('li:nth-child(1n)').addClass('green'); 
       jQuery(this).find('li:nth-child(2n)').addClass('red'); 
       jQuery(this).find('li:nth-child(3n)').addClass('black'); 
    }); 

J'ai ajouté la classe statique sur la première ligne (ce qui signifie 3 premiers li), Besoin plus de lignes mêmes que première ligne Vous pouvez utiliser jQuery Demo ici http://jsfiddle.net/WfKeY/

Answer 1

Vous devriez répéter les classes tous les 3 éléments, utilisez donc 3n, 3n+/-1, 3n+/-2:

jQuery('ul').each(function(){ 
    jQuery(this).find('li:nth-child(3n-2)').addClass('green'); 
    jQuery(this).find('li:nth-child(3n-1)').addClass('red'); 
    jQuery(this).find('li:nth-child(3n)').addClass('black'); 
});​ 

Mise à jour démo: http://jsfiddle.net/WfKeY/2/

Answer 2

maintenant que je comprends la question, voici un un LTERNATIVE:

var $li = $('ul > li'); 
$li.each(function(i) { 
    $(this).addClass($li.eq(i%3).attr('class')); 
}); 

http://jsfiddle.net/zaMUU/5/