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

});

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

2 个答案: