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 */