jQuery каждый цикл - использование переменных
У меня есть список продуктов. Каждый продукт имеет заголовок и ссылку обзора. В настоящее время заголовки связываются непосредственно со страницей отдельного продукта, и ссылки обзора идут в другое место.
Я хотел бы использовать 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);
});
Но это всегда использует ту же переменную "ссылку".
Кто-то может выручить меня?
5 ответов
Я передаю this в качестве аргумента, чтобы определить контекст для каждой итерации цикла each(). На каждой итерации this ссылается на рассматриваемый элемент.
$("li").each(function(){
var link = $("a:eq(0)", this).attr('href');
$("a:eq(1)", this).attr("href", link);
});
Это потому, что вы не используете li как контекст вашего a выбора:
Попробуйте это:
$("li").each(function(){
var a = $('a',this);
var link = a.filter(":eq(0)").attr('href');
a.filter(":eq(1)").attr("href", link);
});
Попробуйте:
$("li").each(function(){
var link = $("a:eq(0)", this).attr('href');
$("a:eq(1)", this).attr("href", link);
});
Другой вариант, позволяющий полностью избежать использования .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 .
$("li").each(function(){
var link = $(this).find("a:eq(0)").attr('href');
$(this).find("a:eq(1)").attr("href", link);
});