2009-08-11 6 views
16

J'ai une liste d'éléments que je veux styliser de 3 manières différentes.addClass every nth

Je souhaite que chaque élément de liste 3 ait la même classe dans toute la liste.

Par exemple:

<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 
<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 
<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 

je peux faire 2 avec: impair/pair, mais comment le faire avec 3?

Répondre

45

essayer

$("ul li:nth-child(3n+1)").addClass("A") 
$("ul li:nth-child(3n+2)").addClass("B") 
$("ul li:nth-child(3n)").addClass("C") 

Ne hésitez pas à le consolider pour le rendre plus joli, mais je voulais exposer les sélecteurs.

+2

Pour en faire une solution de travail utiliser: $ ('ul li: nth -child (3n) '). addClass (' every-third-item-class '); – shuckster

+0

@brownstone - voir l'édition, je l'ai changé pour répondre à son inquiétude totale (quoique longhanded) – Marc

+1

Merci Marc, c'était exactement ce que je – davebowker

2

Je recommande quelque chose comme ceci:

var i = 0; 
$("li").each(function() { 
    var newClass = 'A'; 
    if (i % 3 == 1) newClass = 'B'; 
    if (i % 3 == 2) newClass = 'C'; 
    $(this).addClass(newClass); 
}); 
+2

cela ne fonctionne pas ... supprimer la première ligne et ajouter le "i" dans .... chaque (fonction (i) .... – ggzone

Questions connexes