Ajout de classes différentes à chaque élément de liste

Question

J'ai créé une liste et j'essaie d'ajouter un nom de classe différent à chacun d'eux. À l'heure actuelle, j'utilise cette méthode:

HTML:

<ul class="sd-list"> 
    <li><a href="#">List Item 1</a></li> 
    <li><a href="#">List Item 2</a></li> 
    <li><a href="#">List Item 3</a></li> 
</ul> 

jQuery:

$('.sd-list:nth-child(1)').addClass('green'); 
$('.sd-list:nth-child(2)').addClass('red'); 
$('.sd-list:nth-child(3)').addClass('purple'); 

Cela fonctionne très bien, mais je me demande s'il y a une meilleure méthode que celle que je suis en train d'utiliser. Toute aide serait grandement appréciée.

Answer 1

Vous pouvez mettre les classes dans un tableau:

var colors = ['green', 'red', 'purple']; 

$('.sd-list').each(function() { 
    var index = $(this).index(); 
    if (index < colors.length) { 
     $(this).addClass(colors[index]); 
    } 
}); 

Si les listes sont tous les enfants du même parent et que vous avez utilisé :nth-child(X) pour obtenir l'élément à la position X (au lieu de vraiment utiliser comme « l'enfant n-ième des parents »), et vous avez une classe pour chaque position, vous pouvez également simplifier à:

$('.sd-list').addClass(function(index) { 
    return colors[index]; 
}); 

---

Mais je suis d'accord avec Vlad, vous pouvez facilement écrire ceci directement en CSS:

.sd-list:nth-child(1) { 
    /* rules */ 
} 
/* etc */ 

Answer 2

$(function() { 

     $(".sd-list li").each(function(index) { 
      $(this).attr("class", "color" + index); 
     }); 

});