更改每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元素的顏色

回答

相關問題