Ad

Color Elements Given An Array Of Colors

- 1 answer

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?

Ad

Answer

You can accomplish 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.com/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.com/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.com/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.

Ad
source: stackoverflow.com
Ad