Question

我有一个看起来像这样的for循环

for(i=1; i<= json.tracks.length; i++) {
$('<li>'+ json.tracks[i].name + '</li>').appendTo('#results'); }

默认情况下，它运行100次，我想将一系列颜色应用到它

i = 1 --> red  
i = 2 --> green  
i = 3 --> blue  
i = 3 --> black  
i = 4 --> yellow  
i = 5 --> orange  

i = 6 --> red  
i = 7 --> green  
i = 8 --> red  
...  
...

我尝试了jquery的：nth-child（）函数和一个调制器，但两者都没有真正起作用。

有一个很好的方法吗？

Answer 1

存储所有颜色的数组，并采用array.length的{{1}}模数：

Answer 2

:nth-child()可以正常使用。你必须像

一样使用它

li:nth-child(xn+y)

其中x表示每个第x个孩子，y是您开始的元素。

它也是一个CSS3选择器，所以你甚至不必使用JavaScript（但它在IE9之前不能在IE中工作）。

示例：

li:nth-child(6n+1) {
    color: red;
}

li:nth-child(6n+2) {
    color: green;
}

li:nth-child(6n+3) {
    color: blue;
}

DEMO

将它与jQuery一起使用也可以正常工作：

$('li:nth-child(6n+1)').css('color', 'red');

或在创建元素时直接添加颜色，如其他答案所示。这更好，因为jQuery不必再次搜索元素。

Answer 3

一种方法是将颜色放在一个数组中，然后让循环的迭代找出要添加到LI的颜色，如下所示：

var colors = ["red", "green", "blue", "orange", "black", "yellow"];
for(i=1; i<= 100; i++) {
   $('#results').append('<li style="background: '+colors[i % colors.length]+'">' + json.tracks[i] + '</li>');
}

您可以在此处查看我的示例：http://jsfiddle.net/fwzhB/

祝你好运。

Answer 4

一个简单但粗鲁的建议使用相同数值的元素id

$('<li id=" '+ i  +'">'+ json.tracks[i].name + '</li>').appendTo('#results');

用css表示包含颜色的每个li元素，或者甚至将颜色放在数组的键值对

中

x [0] =“红色”...... 。

和

$('<li style="color: '+ x[i]  +'">'+ json.tracks[i].name + '</li>').appendTo('#results');

但正如前面所提到的，它只能完成工作并且从编码角度来看是可悲的

改变每个n元素的颜色

4 个答案: