javascript - jQuery-更改循环的背景颜色

现在我在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将颜色分配给正方形，即正方形1的“ rgb（255，0，0）”，正方形2的“ rgb（255，255，0）”等。

首先，我测试了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，这对于我来说很重要...


非常感谢您的帮助！

最佳答案

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

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

请注意，.each()是jQuery处理for...loop的方法，在这种情况下，您不需要两者都使用，我在这里使用.each()的内置索引来获取颜色数组的值。

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