如何遍历每个函数中的数组，jQuery答案

【问题标题】：How to loop through an array within each function, jQuery如何遍历每个函数中的数组，jQuery
【发布时间】：2021-03-19 22:54:00
【问题描述】：

我有一个非常简单的问题。我有 6 个 div，所有这些都需要有不同的颜色。

这是我的代码：

    var back = ['80%', '70%', '60%', '50%', '40%', '30%'];

$( ".scenes" ).each(function( index ) {
    console.log(index);

    var i = 0;

    $(this).html(index + 1).css({
        'background-color' : 'hsl(240, 100%, ' + back[i]  + ')'
    });

   
});

所以，我似乎无法弄清楚如何解决这个问题。我没有尝试很多..我基本上被卡住了。我不知道该寻找什么并感到非常沮丧。

如果有人能伸出援手，那就太好了。

【问题讨论】：

var i = 0; 永远不会改变，所以back[i] 始终是back[0]。你不想要back[index]吗？
@VLAZ 没错。我不敢相信我错过了。我想得太复杂了。那解决了它。谢谢！

标签： jquery arrays loops each

【解决方案1】：

要执行您需要的操作，您可以向css() 提供一个函数。这接受元素的索引作为参数，您可以使用它来访问back 数组值。试试这个：

var back = ['80%', '70%', '60%', '50%', '40%', '30%'];

$(".scenes")
  .html(i => i + 1)
  .css('background-color', i => `hsl(240, 100%, ${back[i % back.length]})`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scenes"></div>
<div class="scenes"></div>
<div class="scenes"></div>
<div class="scenes"></div>
<div class="scenes"></div>
<div class="scenes"></div>

【讨论】：

【解决方案2】：

只需使用index 作为数组的索引

var back = ['80%', '70%', '60%', '50%', '40%', '30%'];

$( ".scenes" ).each(function( index ) {
    $(this).html(index+1).css({
        'background-color' : 'hsl(240, 100%, ' + back[index]  + ')'
    });       
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scenes"></div>
<div class="scenes"></div>
<div class="scenes"></div>
<div class="scenes"></div>
<div class="scenes"></div>
<div class="scenes"></div>

【讨论】：

谢谢！不敢相信我错过了 -,-

【解决方案3】：

试试这个代码

    <script>     
        $(document).ready(function() {      

           var back = ['80%', '70%', '60%', '50%', '40%', '30%'];

           $.each(back , function(index, val) { 
              $(".div").html(index + 1).css({
                    'background-color' : 'hsl(240, 100%, ' + val[i]  + ')'
                });
            });    
        }); 
    </script>

【讨论】：

我想你的意思是val。你不需要通过索引来访问它
为什么不访问 each() 循环的索引。
你可以而且是。我的观点是，您的代码中没有 i 变量，而且您也不需要它，因为 val 是数组中作为参数传递给函数的项目