Question

I have a for-loop which looks like this

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

On default it run’s 100 times and I want to apply a sequence of color’s to it

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  
...  
...

I tried to jquery’s :nth-child() function and a modulator but both didn’t really worked.

Is there a nice way to do it?

Answer 1

Store an array for all the colors and take the array.length modulo of i:

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');
}