javascript - 将颜色从数组设置为多个元素

Question

我有一个包含一些颜色的数组。我还有一个带有一些子元素的 div。我想要完成的是每个子元素将从数组中获取一种颜色。我很接近，我可以控制台记录颜色，但此刻 child 被分配了数组中的最后一种颜色。

var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#81c784"];
var setColors = customizeContainer.childNodes;
for (var i = 1; i < setColors.length; i += 2) {
	for (var x = 0; x < colors.length; x++) {
		setColors[i].style.backgroundColor = colors[x];
	}
}

  <div id="customizeMenu" class="col l12">
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
    <div class="col l1"></div>
  </div>

Answer 1

这里有一个解决方案，一旦颜色全部用完就会循环。

var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#81c784"];
var customizeContainer = Array.from(document.querySelectorAll('#customizeMenu > div'));

customizeContainer.forEach(function(node, i) {
    node.style.backgroundColor = colors[i % colors.length];
});

#customizeMenu>div {
  width: 2em;
  height: 2em;
  display: inline-block;
}

<div id="customizeMenu" class="col l12">
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
  <div class="col l1"></div>
</div>

---

您的代码存在的问题是您循环遍历所有颜色并为每个节点分配它们。所以他们都得到了最后一种颜色。

关于每 2 个节点的另一个问题(您在评论中提到)是因为 childNodes 也返回文本节点和评论。因此，您需要使用 children 或使用 document.querySelectorAll 直接选择想要的元素。