jQuery каждый цикл - используя переменные

Question

У меня есть список продуктов. Каждый продукт имеет название и ссылку на отзыв. В настоящее время заголовки ссылаются непосредственно на страницу отдельного продукта, а ссылки на обзоры идут в других местах.

Я бы хотел использовать jquery для каждого цикла, чтобы циклически проходить через каждый li, взять href из заголовка (первая ссылка) и применить его к ссылке обзора (вторая ссылка), чтобы они оба указывали страница продукта.

Упрощенный код будет выглядеть следующим образом:

<ul>
   <li><a href="product1.html">Product 1</a><a href="review1.html">Review 1</a></li>
   <li><a href="product2.html">Product 2</a><a href="review2.html">Review 2</a></li>
   <li><a href="product3.html">Product 3</a><a href="review3.html">Review 3</a></li>
</ul>

Я думал, что это будет что-то вроде следующего:

$("li").each(function(){
   var link = $("a:eq(0)").attr('href');
   $("a:eq(1)").attr("href", link);
});

Но он всегда использует одну и ту же переменную "link".

Может кто-нибудь мне помочь?

Answer 1

Я передаю this в качестве аргумента, чтобы определить контекст для каждой итерации цикла each(). На каждой итерации this относится к рассматриваемому элементу.

$("li").each(function(){
   var link = $("a:eq(0)", this).attr('href');
   $("a:eq(1)", this).attr("href", link);
});

Answer 2

$("li").each(function(){
   var link = $(this).find("a:eq(0)").attr('href');
   $(this).find("a:eq(1)").attr("href", link);
});

Answer 3

Другой вариант, который позволяет полностью не использовать .each, - это передать функцию в качестве второго аргумента .attr.

Это работает следующим образом:

$('li').find('a:nth-child(2)').attr('href', function(index, href) {
    return $(this).prev('a').attr('href'); // use previous sibling's href
});

По сути, он возьмет каждый элемент, соответствующий селектору, передаст его через функцию, а затем установит атрибут href для результата этой функции. В функцию будут переданы аргументы: первым является ее индекс в соответствующем наборе ($('li a:nth-child(2)') здесь), а вторым - текущее значение атрибута. В вашем конкретном случае вас это не волнует, но часто вы захотите преобразовать атрибут на основе его текущего значения, чтобы он мог быть полезен.

Какой из них использовать - дело вкуса, наборы jQuery позволяют вам делать множество вещей без непосредственного использования .each.

Answer 4

Попробуйте:

 $("li").each(function(){
    var link = $("a:eq(0)", this).attr('href');
 $("a:eq(1)", this).attr("href", link);
  });

Answer 5

Это потому, что вы не используете li в качестве контекста вашего a выбора:

Попробуйте это:

$("li").each(function(){
    var a = $('a',this);
    var link = a.filter(":eq(0)").attr('href');
    a.filter(":eq(1)").attr("href", link);
});