Question

现在我在html文件中有6个方块

<div id="container">
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
    <div class="square"> </div>
</div>

我有一个颜色列表如下：

var color = [
"rgb(255, 0, 0)",
"rgb(255, 255, 0)",
"rgb(0, 255, 0)",
"rgb(0, 255, 255)",
"rgb(0, 0, 255)",
"rgb(255, 0, 255)"
]

我想使用jQuery将颜色分配给正方形，即＆＃34; rgb（255,0,0）＆＃34;对于square 1，＆＃34; rgb（255,255,0）＆＃34;对于广场2等。

首先，我测试了js和HTML的连接，它确实有效。然后我尝试了几个版本的jquery。我试过的第一个版本是

for (var i = 0; i<=color.length; i++) {
    $(".square").function() {
            $(this).css("background-color", color[i]);
    };
}

没有回复。然后我尝试了第二个版本，它与jquery中的每个函数一起使用，它是：

for (var i = 0; i<=color.length; i++) {
    $(".square").each(function() {
            $(this).css("background-color", color[i]);
    });
}

奇怪的事情发生了：所有方块的默认颜色是紫色，现在变成浅紫色......

所以，这些是我的问题：

据我所知，jquery的工作方式与JS中的DOM querySelectorAll（）类似。通过使用$（this），它在这里带有一个隐式循环。我怎样才能添加可能导致另一个循环的颜色？或者如何使它有效？
我的代码和/或逻辑有什么问题？这对我来说对于初学者或者jquery来说很重要......

非常感谢你的帮助！

Answer 1

只需循环html元素或数组元素，并使用该索引从其他部分获取元素。您不需要嵌套循环，但需要向html添加一些文本以查看背景。

var color = ["rgb(255, 0, 0)","rgb(255, 255, 0)","rgb(0, 255, 0)","rgb(0, 255, 255)","rgb(0, 0, 255)","rgb(255, 0, 255)"]

$("#container .square").each(function(i) {
  $(this).css('background', color[i])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="square">Text</div>
  <div class="square">Text</div>
  <div class="square">Text</div>
  <div class="square">Text</div>
  <div class="square">Text</div>
  <div class="square">Text</div>
</div>

您也可以对数组循环执行相同的操作，然后使用相同的索引获取html元素。

var color = ["rgb(255, 0, 0)","rgb(255, 255, 0)","rgb(0, 255, 0)","rgb(0, 255, 255)","rgb(0, 0, 255)","rgb(255, 0, 255)"]
color.forEach((c, i) => $(`.square:eq(${i})`).css('background', c))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="square">Text</div>
  <div class="square">Text</div>
  <div class="square">Text</div>
  <div class="square">Text</div>
  <div class="square">Text</div>
  <div class="square">Text</div>
</div>

Answer 2

 var color = ["rgb(255, 0, 0)",
"rgb(255, 255, 0)",
"rgb(0, 255, 0)",
"rgb(0, 255, 255)",
"rgb(0, 0, 255)",
"rgb(255, 0, 255)"];

var elements = document.getElementsByClassName("square");
            
for(var i=0;i<elements.length;i++)
   elements.item(i).style.backgroundColor = color[i];

 <div id="container">
    <div class="square">A </div>
    <div class="square"> B</div>
    <div class="square"> C</div>
    <div class="square"> as</div>
    <div class="square"> asd</div>
    <div class="square">ad </div>
</div>

Answer 3

您可以使用Jquery的each() mehtods内置函数参数，例如这里将idx设置为索引，将el设置为元素。

$(".square").each(function(idx, el) {
    $(el).css("background-color", color[idx]);
});

请注意，.each()是jQuery执行for...loop的方式，在这种情况下，您不需要两者，我在这里使用.each()＆＃ 39; s内置索引以获取颜色数组的值。

您也可以使用$(this)代替$(el)，我只想展示内置选项。

jQuery - 更改循环

3 个答案: