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

Posted 2023-05-09

【中文标题】如何遍历每个函数中的数组，jQuery

【英文标题】：How to loop through an array within each function, 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 没错。我不敢相信我错过了。我想得太复杂了。那解决了它。谢谢！

【参考方案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 是数组中作为参数传递给函数的项目