jquery - jQuery 以动态类型模式为每个 li 赋予特定的背景颜色

Question

我需要一些代码来让 li 在他们进行时获得某种背景颜色。

例如有 5 种颜色

蓝色 红色 绿色 黄色 橙色

我需要它，所以 li 将遵循这个特定的模式，当超过 5 li 时，第 6 个将再次变为蓝色并继续执行序列。

所以会变成：蓝红绿黄橙蓝红等。

提前致谢。

Answer 1

使用 css - nth-child - 注意：不支持 IE < 9

li:nth-child(5n + 1) {
    color: blue;
}
li:nth-child(5n + 2) {
    color: red;
}
li:nth-child(5n + 3) {
    color: green;
}
li:nth-child(5n + 4) {
    color: yellow;
}
li:nth-child(5n) {
    color: orange;
}

演示：小提琴

使用 jQuery .css()

var colors = ['red', 'green', ...]
$('li').css('color', function(idx){
    return colors[idx % colors.length]
})

演示：小提琴

Answer 2

为此，您可以使用 nth-child css 选择器。

http://www.w3schools.com/cssref/sel_nth-child.asp

看例子2

使用公式 (an + b)。说明：a代表一个周期大小，n是一个计数器（从0开始），b是一个偏移值。

在这里，我们为索引为 3 的倍数的所有 p 个元素指定背景颜色：

p:nth-child(3n+0)
{
background:#ff0000;
}

Answer 3

假设您出于某种原因不想在样式表中执行此操作（并在我的解释中付出尽可能多的努力）：

var colors = ['blue','red','green','yellow','orange'];
$("li").each(function(i) {
    $(this).css("background-color", colors[i%colors.length]);
});

Answer 4

尝试这个：

li:nth-of-type(5n+1){background-color:blue;}
li:nth-of-type(5n+2){background-color:red;}
li:nth-of-type(5n+3){background-color:green;}
li:nth-of-type(5n+4){background-color:yellow;}
li:nth-of-type(5n+5){background-color:orange;}

在这里拉小提琴。