jquery make rainbow pattern with list

Question

my html

<div id="mainMenu">
    <span>Thing 1</span>
    <span>Thing 2</span>
    <span>Thing 3</span>
    <span>Thing 4</span>
    <span>Thing 5</span>
    <span>Thing 6</span>
    <span>Thing 7</span>
</div>

how can i get thing 6 and thing 7 to have colors? it stops at them because it does 1-5

colors = ['red','orange','yellow','green', 'blue']; //roygbiv

$('#mainMenu span').each(function(i){
    this.style.color = colors[i];
});

You only have 5 colors in your array. What would you expect to happen? — Mike Brant, Mar 10 '14 at 06:11
@MikeBrant in all fairness - He doesn't ask why this happens. He asks how this can be fixed. — Nilzone-, Mar 10 '14 at 06:28
@Nilzone It can be fixed by adding two more items to his array that represent the last two colors. — Mike Brant, Mar 10 '14 at 06:32

score 3 · Accepted Answer · edited May 23 '17 at 12:13

3

Let it wrap around:

this.style.color = colors[i % colors.length];

The expression i % colors.length yields the remainder after division of both operands and will always be in the range of [0, colors.length). It's also referred to as the modulo operator.

An even neater version can be made:

$('#mainMenu span').css('color', function(index) {
    return colors[index % colors.length];
});

Demo

See also:

edited May 23 '17 at 12:13

Community

1
1

answered Mar 10 '14 at 05:56

Ja͢ck

161,074
33
239
294

tthanks. you are so fast. Can you please tell me though what is % called? I need to look that up to see how it work – user3400321 Mar 10 '14 at 06:02
@user3400321 I've added a reference to help you further on how to use % :) – Ja͢ck Mar 10 '14 at 06:03

jquery make rainbow pattern with list

1 Answers1