循环遍历从动态生成的索引开始的数组

Question

对不起，如果标题没有准确地抓住我的问题；不知道怎么用一句话写出来。

问题描述：假设我有一组颜色和一堆 div。我想通过数组颜色循环 div 背景颜色，但还要确保 每个 div 从颜色数组中的不同位置开始。

示例：我的颜色数组是[red, blue, yellow, green]。第一个div 颜色以red 开头，然后循环通过blue、yellow、green，然后返回red。 Div2 以 blue 开头，然后是 yellow, green, red, blue，依此类推，div 元素的数量与我一样多。

我能想到的两个潜在解决方案是：

1. 是否必须为每个 div 生成一个新的颜色数组？ （可能通过将 1 加到计数器并执行拼接或推送或弹出操作）
2. 我能否循环遍历原始数组，只是从每个 div 的不同位置开始？ （根据其位置动态生成偏移量 - 1st div、2nd、3rd 等）

这两种方法都可以解决问题吗？

Answer 1

听起来你只需要模数。确定特定元素的起始索引后，以数组长度为模递增索引。如果颜色数组是colors，那么你可以这样做

async function cycle(elm, index) {
  while (true) {
    elm.style.backgroundColor = colors[index];
    index = (index + 1) % colors.length;
    await delay(1000);
  }
}
cycle(someElement, 0);
// or
cycle(someOtherElement, 1);
// etc

Answer 2

只是为了好玩，这个 CSS 动画。问题标记为css

.color-change {
  --animation-duration: 5s;
  display: inline-block;
  height: 100px;
  width: 100px;
  animation: colors var(--animation-duration) steps(1, end) infinite;
}
.color-change:nth-child(4n+2) { animation-delay: calc(var(--animation-duration) * -.25) }
.color-change:nth-child(4n+3) { animation-delay: calc(var(--animation-duration) * -.5) }
.color-change:nth-child(4n+4) { animation-delay: calc(var(--animation-duration) * -.75) }


@keyframes colors {
  from,
  to  { background: red; }
  25% { background: blue; }
  50% { background: yellow; }
  75% { background: green; }
}

<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>

Answer 3

您不需要为每个 div 生成一个新数组，因此虽然您提出的两种解决方案都可以工作，但第二种方法更好。

在为每个div设置初始颜色时，只需根据当前div的索引选择颜色即可。

div[index].style.backgroundColor = colors[index];

由于您可以拥有比颜色更多的 div，因此一旦 div 的索引超过颜色的数量，您就需要从数组的开头开始。正如CertainPerformance's answer 所示，您可以使用索引的模数轻松地将索引“循环”回到开头。所以作业变成了：

divs[index].style.backgroundColor = colors[index % colors.length];

完成初始颜色分配后，一种迭代颜色的方法是简单地找到当前颜色的索引并增加一，再次使用模数来循环颜色。

var currentColor = doc.style.backgroundColor;
var colorIndex = (colors.indexOf(currentColor) + 1) % colors.length;
doc.style.backgroundColor = colors[colorIndex];

这是一个完整的例子。

var colors = ['red', 'blue', 'yellow', 'green'];

function assignInitialColors() {
  var divs = document.getElementsByClassName("color-change");
  for (var index in divs) {
    var colorIndex = index % colors.length;
    if(divs[index].style) {
      divs[index].style.backgroundColor = colors[colorIndex];
    }
  }

  setInterval(iterateColors, 2000);
}


function iterateColors() {
   var divs = document.getElementsByClassName("color-change");
    for (var index in divs) {
    var doc = divs[index];
    var currentColor = doc.style && doc.style.backgroundColor;
    if (currentColor) {
      var colorIndex = (colors.indexOf(currentColor) + 1) % colors.length;
      doc.style.backgroundColor = colors[colorIndex];
    }
  }
}

assignInitialColors();

div, .color-change {
  min-height: 60px;
  min-width: 60px;
  margin: 5px;
  float: left;
}

<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>