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

Question

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

Я хотел бы использовать каждый цикл jquery для каждого цикла, взять 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); 
}); 

Но она всегда использует ту же переменную «ссылка».

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

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

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

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

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

Answer 4

Try:

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

Answer 5

Другой вариант, который позволяет избежать использование .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.