更改每n元素的颜色

我有一个for循环看起来像这样更改每n元素的颜色

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（）功能和调制器，但都没有真正奏效。

有没有一种很好的方法来做到这一点？

来源

2011-11-08 Backslash

存储所有的颜色组成的数组，并采取i的array.length模：

var colors = ['red','green','blue','black','yellow','orange']; 
for(i=0; i<json.tracks.length; i++) { 
    var idx = i % colors.length; 
    $('<li />').text(json.tracks[i].name) 
     .css('color',colors[idx]) 
     .appendTo('#results'); 
}

来源

2011-11-08 17:57:02 Blazemonger

谢谢！工作非常好:) – Backslash

@MariusFeldmann：如果你满意，不要忘记标记为答案。 –

添加一类在同一个循环的动作使用模i % 5：

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

这将通过class="color4"

类添加到每个新<li>为class="color0"然后在你的CSS，颜色类定义到你希望他们成为的任何颜色。使用类的好处是你也可以修改其他的CSS属性。

.color0 { 
    color: red; 
    /* these are bold too, for some reason */ 
    font-weight: bold; 
} 
.color1 { 
    color: green; 
} 
.color2 { 
    color: blue; 
} 
... 
.color4 { 
    color: orange; 
}

来源

2011-11-08 17:56:56

: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不必再次搜索元素。

来源

2011-11-08 17:57:21

翻转侧：这是一个CSS3选择器，因此旧版本的IE将不被支持。（另外，他使用JavaScript无论如何生成列表。） – Blazemonger

@ mblase75：是的，它不会工作在

一只能梦想。 :-) – Blazemonger

一个简单但刷建议使用相同的数字值

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

的元素ID的CSS每个li元素包括颜色或甚至把颜色阵列的关键值对

×〔 0] =“红”... 。。

和

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

但previusly提到它仅仅能够完成任务，并从编码的角度看可怜

来源

2011-11-08 17:58:30 optimusprime619

一种方式做这将是把颜色数组，然后让循环迭代找出要加入哪个颜色的李，像这样：

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/

好运。

来源

2011-11-08 17:59:32 Jemaclus

更改每n元素的颜色

回答

相关问题