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

该循环将使ALL href的值为5 ...我理解为什么会这样，但我想不出解决方案：1st href = 1，2nd href = 2，3rd href = 3。 ....等等。解决办法是什么？谢谢。

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>

Answer 2

a变量包含所有锚标记，因此您应在循环中使用.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>

解决方案，以获取传递给每个元素的单个值

2 个答案: