Loop through multiple arrays

Question

I'm trying to loop through a series of li elements, and match each element with a color from the color array, like so:

var li = document.getElementsByTagName('li');
var colors = ["salmon", "teal", "orange", "grey", "blue"];

for (i=0; i < li.length; i++) {
li[i].style.backgroundColor=colors[i]

}

However, because the length of colours are shorter than the length of the li elements, it stops short.

How can I make the colours array loop through again, until it matches whatever the number of li elements there are?

JSFIDDLE

Joseph Silber · Accepted Answer · 2013-09-09 00:11:33Z

5

Use the % modulus operator:

var li = document.getElementsByTagName('li');
var colors = ["salmon", "teal", "orange", "grey", "blue"];
var colorsCount = colors.length;

for ( var i = 0; i < li.length; i++ ) {
    li[i].style.backgroundColor = colors[ i % colorsCount ];
}

Here's your fiddle: http://jsfiddle.net/LhmgQ/1/

answered Sep 9, 2013 at 0:11

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zong Over a year ago

It should be i % colorsCount actually.

user1469270 Over a year ago

Thanks, can you explain the logic to that?

Joseph Silber Over a year ago

@tmyie - i % colorsCount will divide i by colorsCount, and return the remainder. As long as i is less than colorsCount, you'll always get back i. If i is greater than colorsCount, you'll get i - colorsCount (as many times as possible).

Collectives™ on Stack Overflow

Loop through multiple arrays

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related