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

抱歉，如果标题没有准确捕捉我的问题；我不知道怎么用一句话来写这个

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

示例：我的颜色数组是

[红、蓝、黄、绿]

。第一个

div

颜色以

红色开始，然后依次经过
蓝色
、
黄色
、
绿色
，然后返回到
红色
。Div2从
blue
开始，然后变为
黄、绿、红、蓝
，以此类推，以获得尽可能多的
div
元素

我可以想象的两个潜在解决方案是：

我是否需要为每个div生成一个新的颜色数组？（可能通过向计数器添加1并执行拼接、推送或弹出操作）
我可以从每个div的不同位置开始循环原始数组吗？（根据其位置动态生成偏移量-第1分区、第2分区、第3分区等）
这两种方法都是解决问题的可行方法吗？
听起来你需要的只是模。一旦确定了某个特定元素的起始索引，就将索引按数组长度的模递增。如果颜色数组是
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

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

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

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

由于div可以多于颜色，因此一旦div的索引超过颜色的数量，就需要从数组的开头开始。如图所示，您可以使用索引的模数轻松地将索引“循环”到开头。因此，任务变成：

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=[“红色”、“蓝色”、“黄色”、“绿色”]；
函数assignInitialColors（）{
var divs=document.getElementsByClassName（“颜色变化”）；
对于（以divs为单位的var指数）{
var colorIndex=索引%colors.length；
if（divs[index].style）{
divs[index].style.backgroundColor=颜色[colorIndex]；
}
}
设置间隔（迭代颜色，2000年）；
}
函数iterateColors（）{
var divs=document.getElementsByClassName（“颜色变化”）；
对于（以divs为单位的var指数）{
var doc=divs[索引]；
var currentColor=doc.style&&doc.style.backgroundColor；
如果（当前颜色）{
var colorIndex=（colors.indexOf（currentColor）+1）%colors.length；
doc.style.backgroundColor=颜色[颜色索引]；
}
}
}
分配初始颜色（）
div.。颜色变化{
最小高度：60px；
最小宽度：60px；
保证金：5px；
浮动：左；
}
为了好玩，这个CSS动画。这个问题被标记为


。颜色变化{
--动画持续时间：5s；
显示：内联块；
高度：100px；
宽度：100px；
动画：颜色变量（--动画持续时间）步骤（1，结束）无限；
}
.颜色更改：第n个子项（4n+2）{动画延迟：计算（var（--动画持续时间）*-.25）}
.颜色更改：第n个子项（4n+3）{动画延迟：计算（var（--动画持续时间）*-.5）}
.颜色更改：第n个子（4n+4）{动画延迟：计算（var（--动画持续时间）*-.75）}
@关键帧颜色{
从…起
至{背景：红色；}
25%{背景：蓝色；}
50%{背景：黄色；}
75%{背景：绿色；}
}

谢谢，这就成功了！我设法使它适应我的用例（StEffice Talk和Stord.FoeCH），并使用了一个计数器而不是简单地添加了一个函数。当一个答案解决了你的问题时，你可以考虑把它标记为接受（检查左边的复选框）。为了表明问题已经解决：）我有一个关于验收礼仪的问题要问你-你是第一个答案，模数建议是有效的，但fqhv稍后回答了一个更长的解释，并在你的基础上构建了代码示例。我应该接受第一个正确答案，还是更“完整”的答案？