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

Question

我有一组值：

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

我想 select 页面上的所有 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.....等等解决办法是什么？谢谢。

Answer 1

a 变量包含所有锚标记，因此您应该 select 在循环

中使用 .eq() 按索引索引相关元素

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])
}

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])
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="">1th</a>
<a href="">2th</a>
<a href="">3th</a>
<a href="">4th</a>
<a href="">5th</a>

您可以简化您的代码并使用 .each() 而不是 for 来循环。

var arr = [1, 2, 3, 4, 5];
$("a").each(function(i){
  $(this).attr('href', arr[i]);
});

var arr = [1, 2, 3, 4, 5];
$("a").each(function(i){
  $(this).attr('href', arr[i]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="">1th</a>
<a href="">2th</a>
<a href="">3th</a>
<a href="">4th</a>
<a href="">5th</a>

您也可以使用纯 javascript

来完成这项工作

var arr = [1, 2, 3, 4, 5];
document.querySelectorAll("a").forEach((ele, i) => ele.href = arr[i])

var arr = [1, 2, 3, 4, 5];
document.querySelectorAll("a").forEach((ele, i) => ele.href = arr[i])

<a href="">1th</a>
<a href="">2th</a>
<a href="">3th</a>
<a href="">4th</a>
<a href="">5th</a>

Answer 2

您必须在每次迭代中定位相应的 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>

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

Solution to get individual value passed to each element

html

javascript

anchor

jquery