jquery - 为每个列表项添加不同的类

Question

我创建了一个列表，并尝试为每个列表添加一个不同的类名。目前，我正在使用这种方法：

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');

这很好用，但我想知道是否有比我目前使用的更好的方法。任何帮助将不胜感激。

Answer 1

您可以将类放在一个数组中：

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

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

如果列表都是同一个父级的所有子级，并且您曾经:nth-child(X)在位置获取元素X（而不是真正将其用作“父级的第 n 个子级”），并且每个位置都有一个类，您还可以简化它到：

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

---

但我同意 Vlad 的观点，你可以很容易地直接用 CSS 编写：

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

Answer 2

$(function () {

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

});