2010-05-18 21 views
5

Ürün listem var. Her ürünün bir başlığı ve bir inceleme bağlantısı vardır. Halihazırda başlıklar doğrudan bireysel ürün sayfasına bağlanır ve inceleme bağlantıları başka yerlere gider.jQuery her döngü - değişkenleri kullanarak

Her döngüde bir döngü oluşturmak için her döngüde bir jQu kullanmak istiyorum, href'i başlıktan (ilk bağlantı) alın ve onu gözden geçirme bağlantısına (ikinci bağlantıya) uygulayın; ürün sayfası. aşağıdaki gibi

Basitleştirilmiş kod şöyle olacaktır:

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

Ben aşağıdaki gibi bir şey olacağını düşündüm:

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

Ama her zaman aynı değişkeni "bağlantı" kullanır.

Birisi bana yardımcı olabilir mi?

cevap

11

I each() döngü her okunması için bağlam tanımlamak için bir bağımsız değişken olarak this geçirerek. Her yinelemede, this, söz konusu öğeye karşılık gelir. Eğer a seçimin bağlam olarak li kullanmıyor çünkü

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

+1. – Gabriel

+2

Belki de, $() 'ye (yani" bu "burada) geçiş yaptığınız ikinci parametrenin, seçicinin bağlamını tanımladığını açıklamalısınız. –

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

Onun:

bu deneyin:

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

Dene:

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

Diğer bir seçenek önlemesidir .each'u kullanmak tamamen bir işlevi geçmek .attr için ikinci argüman olarak. aşağıdaki gibi

Bu çalışır:

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

Esasen, bu seçici ile eşleşir her eleman almak işlevi geçirin ve daha sonra bu işlevinin sonucuna href özelliğini ayarlar. Fonksiyon argümanlardan geçirilecektir: Birincisi eşleşen kümedeki dizinidir ($('li a:nth-child(2)') burada) ve ikincisi özniteliğin geçerli değeridir. Özel durumunuzda, umurumda değil, ancak çoğu zaman bir özelliği mevcut değerine göre dönüştürmek isteyeceksiniz, bu yüzden kullanışlı olabilir.

Hangisinin kullanacağınız tamamen bir zevk meselesidir, jQuery setleri, .each'u doğrudan kullanmanıza gerek kalmadan bir şeyler yapmanıza olanak tanır. Context argümanının kullanımı için

+0

Cool, bunun için şerefe - aynı sorunu farklı bir şekilde görmek güzel. Bu yüzden jquery'yi seviyorum :-) –