How do I assign this array of colors to a bunch of divs?

var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];

I know I can do it by randomly selecting colors from my array like this:

var random_color = colors[Math.floor(Math.random() * colors.length)];
$("div").css('background-color', random_color);

But it's using a lot of the same colors in order and I need them spread out more. How can I assign them in order starting from the 1st color in the array to last and then back to first?

How do I assign this array of colors to a bunch of divs?

var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];

I know I can do it by randomly selecting colors from my array like this:

var random_color = colors[Math.floor(Math.random() * colors.length)];
$("div").css('background-color', random_color);

But it's using a lot of the same colors in order and I need them spread out more. How can I assign them in order starting from the 1st color in the array to last and then back to first?

• javascript
• jquery

2 Answers 2

You can acplish it looping the elements and moduling the index by the list length.

var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];
var divs = $('div');


for (var i = 0; i < divs.length; i++) {
    var color = colors[i % colors.length];

    $(divs[i]).css('background-color', color);
};

JSFiddle

Or a slightly more concise version of the above:

var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];

// selecting the <div> elements, and chaining with the css()
// method; using that method to update the specified -
// 'background-color' - property using the anonymous function
// from which we use the index of the <div> in from the jQuery
// collection:
$('div').css('background-color', function (index) {

  // using the index to determine which color should
  // be retrieved, and returning it as the value
  // to set as the background-color. This approach
  // iterates over each element in the collection
  // and returns the appropriate value to each of
  // those elements:
  return colors[index % colors.length];
});

var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];
$('div').css('background-color', function(index) {
  return colors[index % colors.length];
});

div {
  width: 50px;
  height: 50px;
  margin-bottom: 0.5em;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

JS Fiddle demo.

Or, using the DOM:

// using an Immediately-Invoked Function Expression ("IIFE")
// in order that the function is executed when encountered,
// and doesn't require being called later:
(function (){
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

      // creating an Array from the collection returned by
      // document.querySelectorAll():
      divs = Array.from( document.querySelectorAll('div') );

  // iterating over that array of <div> elements, using
  // Array.prototype.forEach()
  divs.forEach( function (div, index) {
  // 'div' is the array-element of the Array over which
  // we're iterating,
  // 'index' is the index of that array-element in the
  // Array over which we're iterating.

    // setting the background-color style of each <div>
    // to the color retrieved from the Array:
    div.style.backgroundColor = colors[ index % colors.length ];
  });
})();

(function() {
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

    divs = Array.from(document.querySelectorAll('div'));
  divs.forEach(function(div, index) {
    div.style.backgroundColor = colors[index % colors.length];
  });
})();

div {
  width: 50px;
  height: 50px;
  margin-bottom: 0.5em;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

JS Fiddle demo.

Using the DOM, with Arrow functions:

// using an Immediately-Invoked Function Expression ("IIFE")
// in order that the function is executed when encountered,
// and doesn't require being called later:
(function (){
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

      // creating an Array from the collection returned by
      // document.querySelectorAll():
      divs = Array.from( document.querySelectorAll('div') );

  // iterating over that array of div elements, as above;
  // the arguments in brackets are, again, the Array-element
  // from the Array, and its index in the Array. 
  // the right-hand side of the Arrow Function is exactly
  // as above:
  divs.forEach( (div, index) => div.style.backgroundColor = colors [ index % colors.length ]);
})();

(function() {
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

    divs = Array.from(document.querySelectorAll('div'));
  divs.forEach((div, index) => div.style.backgroundColor = colors[index % colors.length]);
})();

div {
  width: 50px;
  height: 50px;
  margin-bottom: 0.5em;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

JS Fiddle demo.

Actually, you could use steps of values within the range to prevent 2 colors from being close. To do what you are asking though you can setup a currentColor value and increment it each time you set a color. You would use the currentColor as an index when using the element from the array (instead of a random number). You can then mod the result by the array length so it loops.

var currentColor = 0;
var colorArray = [1,2,3,4,5,6];

for(var i=0;i<colorArray.length*3;i++) {
  // When setting the color increment currentColor value
  document.write(colorArray[currentColor]); // This would actually be where you set the color based on the current color index
  currentColor = (currentColor + 1)%colorArray.length;
}