javascript - 给定颜色数组的颜色元素

Question

如何将这个颜色数组分配给一堆 div？

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

我知道我可以像这样从数组中随机选择颜色来做到这一点:

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

但它按顺序使用了很多相同的颜色，我需要将它们分散得更多。我怎样才能按顺序分配它们，从数组中的第一种颜色到最后一种颜色，然后回到第一种颜色？

Answer 1

您可以完成循环元素并根据列表长度调整索引。

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

或者上面的稍微更简洁的版本:

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 .

或者，使用 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 .

使用带有箭头功能的 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, 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 .