根据JavaScript中的数组更改div背景颜色？

我有从数据库加载的div，div的数量未知（可能增加或减少），每个div都有我代码中的随机颜色：

$(".ooicon").each(function() {
  var items = ["#9062aa","#3fb4e9","#6fc063","#d94949","#f8951e","#7a564a","#029688","#2d2f79","#e81f63"];
  var color = items[Math.floor(Math.random() * items.length)];
  $(this).css('background', color);
});

这段代码在每次重新加载或刷新时都会随机更改颜色，我想使颜色保持静态，在刷新时不会更改

例如，第一个div将具有来自代码的颜色

#9062aa

，第二个div将是

#3fb4e9

，依此类推。。当数组中的颜色达到最后一种颜色时，它将使用第一种颜色重新开始

---

希望您能理解我的意思。

您只需在数组上循环，而不必使用random，当索引等于数组项时，将其重置为0

请参阅下面的代码片段：

var项目=[“#9062aa”、“#3fb4e9”、“#6fc063”、“#d94949”、“#f8951e”、“#7a564a”、“#029688”、“#2d2f79”、“#e81f63”]；
var指数=0；
颜色变异；
$（“.ooicon”）。每个（函数（）{
if（index==items.length）
指数=0；
颜色=项目[索引]；
$（this.css（'背景'，颜色）；
索引++；
});
.ooicon{
宽度：100%；
高度：10px；
利润底部：3倍；
}
您只需在数组上循环，而不使用random，当索引等于数组项时，将其重置为0

请参阅下面的代码片段：


var项目=[“#9062aa”、“#3fb4e9”、“#6fc063”、“#d94949”、“#f8951e”、“#7a564a”、“#029688”、“#2d2f79”、“#e81f63”]；
var指数=0；
颜色变异；
$（“.ooicon”）。每个（函数（）{
if（index==items.length）
指数=0；
颜色=项目[索引]；
$（this.css（'背景'，颜色）；
索引++；
});
.ooicon{
宽度：100%；
高度：10px；
利润底部：3倍；
}
使用
Math.random（）
时，颜色会发生变化。如果希望它们的颜色基于元素在集合中的位置是静态的，请使用它们的索引值。这可以作为提供给
each（）
的第一个参数进行检索：

注意，我将
项
声明移到了循环之外；没有必要在每次迭代中重新定义相同的数据。还要注意使用模运算符（
%
）来简化数组的迭代访问，以及直接设置
背景色的更改。
使用
Math.random（）
时颜色会发生变化。如果希望它们的颜色基于元素在集合中的位置是静态的，请使用它们的索引值。这可以作为提供给
each（）
的第一个参数进行检索：

注意，我将
项
声明移到了循环之外；没有必要在每次迭代中重新定义相同的数据。还要注意使用模运算符（
%
）简化数组的迭代访问，以及直接设置
背景色的更改。
无需使用math.random，请检查下面的代码片段：


var colors=[“#9062aa”、“#3fb4e9”、“#6fc063”、“#d94949”、“#f8951e”、“#7a564a”、“#029688”、“#2df79”、“#e81f63”]；
var计数=0；
函数bgcolor（）{
$（“body”）.find（“div”）.each（function（）{
var指数=$（“主体”）.find（“div”）.index（本）；
变量i=（索引+计数）%colors.length；
$（this.css（“背景色”，colors[i]）；
});
计数++；
}
$（窗口）。调整大小（bgcolor）；
$（文档）.ready（bgcolor）

内容-1
内容-2
内容-3
内容-4
内容-5
内容-6
内容-7
内容-8
内容-9
内容-10
内容-11
内容-12
Content-13
您可以不使用math.random来完成此操作。请检查下面的代码片段：


var colors=[“#9062aa”、“#3fb4e9”、“#6fc063”、“#d94949”、“#f8951e”、“#7a564a”、“#029688”、“#2df79”、“#e81f63”]；
var计数=0；
函数bgcolor（）{
$（“body”）.find（“div”）.each（function（）{
var指数=$（“主体”）.find（“div”）.index（本）；
变量i=（索引+计数）%colors.length；
$（this.css（“背景色”，colors[i]）；
});
计数++；
}
$（窗口）。调整大小（bgcolor）；
$（文档）.ready（bgcolor）

内容-1
内容-2
内容-3
内容-4
内容-5
内容-6
内容-7
内容-8
内容-9
内容-10
内容-11
内容-12
内容-13
不要保留颜色数组。每个循环似乎都不好
代码。所以，如果你将每个循环中的项的当前索引除以长度，
您将获得所需的重置逻辑，以从阵列中选择颜色

 var items = ["#9062aa","#3fb4e9","#6fc063","#d94949","#f8951e",
 "#7a564a","#029688","#2d2f79","#e81f63"];

 $(".ooicon").each(function(index) {

   var color = items[index % items.length];
   $(this).css('background', color);

  });

这应该行得通，希望有帮助。
不要将颜色数组保留在其中。每个循环似乎都不好
代码。所以，如果你将每个循环中的项的当前索引除以长度，
您将获得所需的重置逻辑，以从阵列中选择颜色

 var items = ["#9062aa","#3fb4e9","#6fc063","#d94949","#f8951e",
 "#7a564a","#029688","#2d2f79","#e81f63"];

 $(".ooicon").each(function(index) {

   var color = items[index % items.length];
   $(this).css('background', color);

  });

这应该行得通，希望能有所帮助。
var color=items[index%items.length]
索引
作为参数传递给
每个
var color=items[index%items.length]的回调函数
索引
作为参数传递给
每个
的回调函数。您根本不需要在这里维护
索引
，因为一个索引被传递给
每个（）
@rorymcrossan，是的，您是对的，错过了，谢谢。您根本不需要在这里维护
索引，因为一个索引被传递给
每个（）
@RoryMcCrossan，是的，你是对的，错过了，谢谢。添加与已经提供的答案完全相同的答案有什么意义？呵呵，好问题，请检查时间点，我的时间点更早。不，不是。我的答案比你的答案早4分钟。正确地说，现在的问题是我正在键入我的答案，你可能键入并发布了完全相同的答案，因此发生了这种情况，请尝试理解这一点：（添加与已提供的答案完全相同的答案有什么意义？呵呵，好问题，请检查timestap，我的答案在前面。不，不是。我的答案比你的答案早4分钟。正确地观察到，现在的重点是我正在键入我的答案，你可能已经键入并发布了完全相同的答案，因此发生了这种情况，请