Решение, чтобы получить индивидуальную ценность, переданную каждому элементу - PullRequest
Новая
       10

Решение, чтобы получить индивидуальную ценность, переданную каждому элементу

0 голосов
/ 11 декабря 2018

У меня есть массив значений: 

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 ... Я понимаю, почему это так, но я не могу придумать, какое решение получить: 1-йhref = 1, 2-й href = 2, 3-й href = 3 ..... и т. д.Каково решение?Спасибо.

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

Вы должны нацеливаться на соответствующий элемент 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(), который использует этот объект для ссылки на текущий элемент: 

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>
0 голосов
/ 11 декабря 2018

Переменная 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>
...