javascript - 将单个值传递给每个元素的解决方案

Question

我有一组值:

var arr = [1, 2, 3, 4, 5];

我想选择页面上的所有 a 标签，并从数组内部为它们分配各自的 href 值。

var $a = $('a');

我运行了一个for循环

for(let i = 0; i < arr.length; i++) {
  a.attr('href', arr[i])
}

循环将为所有 href 赋予 5 的值...我明白为什么会这样，但我想不出一个解决方案来获得:1st href = 1、2nd href = 2、3rd href = 3。 ....ETC。解决办法是什么？谢谢。

Answer 1

您必须在每次迭代中定位相应的 anchor 元素。您可以使用 jQuery 的 .eq()与 i 的当前值。

var arr = [1, 2, 3, 4, 5];
var $a = $('a');
for(let i = 0; i < arr.length; i++) {
  $a.eq(i).attr('href', arr[i]);
  $a.eq(i).text('Link ' +arr[i]); // for test
}

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

尽管我更喜欢使用 jQuery 的 .each()它使用 this 对象来引用当前元素:

var arr = [1, 2, 3, 4, 5];
$('a').each(function(i){
  $(this).attr('href', arr[i]);
  $(this).text('Link ' +arr[i]); // for test
});

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