jQuery ogni ciclo - utilizzando le variabili

Question

Ho un elenco di prodotti. Ogni prodotto ha un titolo e un link di recensione. Attualmente i titoli si collegano direttamente alla pagina del singolo prodotto e i link delle recensioni vanno altrove.

Mi piacerebbe utilizzare un jquery ogni ciclo per scorrere ogni li, prendere l'href dal titolo (il primo link) e applicarlo al link di revisione (il secondo link), quindi entrambi puntano a la pagina del prodotto.

codice semplificato potrebbe essere il seguente:

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

ho pensato che sarebbe stato qualcosa di simile al seguente:

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

ma utilizza sempre lo stesso "link" variabile.

Qualcuno può darmi una mano?

Answer 1

sto passando this come argomento per definire il contesto per ciascuna iterazione del ciclo each(). Su ogni iterazione, this fa riferimento all'elemento in questione.

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

suo perché non si utilizza il li come il contesto della selezione a:

Prova questo:

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

Answer 4

Prova:

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

Answer 5

Un'altra opzione che evita dover usare .each è interamente per passare una funzione come secondo argomento a .attr.

Questo funziona come segue:

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

Essenzialmente, ci vorranno ciascun elemento che corrisponde al selettore, passare attraverso la funzione, e quindi impostare l'attributo href al risultato di tale funzione. Gli argomenti della funzione saranno passati: il primo è il suo indice nel set corrispondente ($('li a:nth-child(2)') qui), e il secondo è il valore corrente dell'attributo. Nel tuo caso particolare, non ti interessa neanche, ma spesso vorrai trasformare un attributo in base al suo valore attuale, quindi può essere utile.

Quale da usare è interamente una questione di gusti, i set di jQuery ti consentono di fare molte cose senza dover usare direttamente lo .each.