jQuery cada ciclo - usando variables

Question

Tengo una lista de productos. Cada producto tiene un título y un enlace de revisión. Actualmente, los títulos se vinculan directamente con la página del producto individual, y los enlaces de revisión van a otra parte.

Me gustaría utilizar un jquery en cada ciclo para recorrer cada li, tomar el href del título (el primer enlace) y aplicarlo al enlace de revisión (el segundo enlace), por lo que ambos apuntan a la página del producto.

código simplificado sería la siguiente:

<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> 

pensé que sería algo así como lo siguiente:

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

Pero siempre utiliza el mismo "link" variable.

¿Alguien me puede ayudar?

Answer 1

estoy pasando this como argumento para definir el contexto para cada iteración del bucle each(). En cada iteración, this se refiere al elemento en cuestión.

$("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

Su porque no está utilizando el li como el contexto de su selección a:

Prueba esto:

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

Answer 4

Probar:

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

Answer 5

Otra opción que evita tener que usar .each completamente es pasar una función como el segundo argumento a .attr.

Esto funciona de la siguiente manera:

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

En esencia, se tomará cada elemento que coincide con el selector, pasarla a través de la función, y luego establecer el atributo href al resultado de esa función. La función se pasará argumentos: el primero es su índice en el conjunto correspondiente ($('li a:nth-child(2)') aquí), y el segundo es el valor actual del atributo. En su caso particular, tampoco le importa, pero a menudo querrá transformar un atributo en función de su valor actual, por lo que puede ser útil.

Cuál usar es enteramente una cuestión de gusto, los conjuntos jQuery le permiten hacer muchas cosas sin tener que usar directamente .each.