javascript - jquery make rainbow pattern with list -

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 thing 6 , thing 7 have colors? stops @ them because 1-5

colors = ['red','orange','yellow','green', 'blue']; //roygbiv  $('#mainmenu span').each(function(i){     this.style.color = colors[i]; }); 

let wrap around:

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

the expression i % colors.length yields remainder after division of both operands , in range of [0, colors.length). it's referred modulo operator.

an neater version can made:

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

demo

see also:

• css(propertyname, function(index,value))
• what % in javascript