jQuery'de each Metodu ile Çalışma

jQuery kullanarak elde ettiğimiz bir grup öğeye sahip olduğumuzda, değişiklikleri yalnızca tüm öğeler için aynı anda yapabiliriz.

Örneğin, bulunan tüm paragrafların metnini değiştirmek istiyorsak, metni farklı yapmamız mümkün olmaz.

Bu durumda, jQuery kümesindeki tüm öğelere bir işlev uygulamamıza izin veren özel each metodu yardımcı olur. Bu işlev içinde, öğeleri ayırabilir ve her biriyle farklı şekilde ilgilenebiliriz.

Aslında each, bulunan tüm öğeleri üzerinde dolaşabileceğimiz bir döngüdür. Şu anda döngünün üzerinden geçtiği öğeye bağlantı this içinde bulunur.

Daha önce yaptığımız gibi, sade JavaScript'te bu this'ı kullanabiliriz, örneğin şu şekilde - this.innerHTML - ve öğelerimizin iç içeriğini gösterebiliriz. Ama daha iyisi, this'ı jQuery doları içine şu şekilde sarmaktır - $(this) - bu durumda ona jQuery'nin tüm metodlarını ve zincirlerini uygulayabiliriz.

Şu HTML kodunu inceleyelim:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

Bu örnekte, www sınıfına sahip tüm öğeleri elde etmeli ve içeriklerini ekranda göstermeliyiz. Nasıl yapılır: $('.www') ile ihtiyacımız olan öğeleri elde ederiz, ardından each(test) kullanarak elde edilen her öğeye test işlevini uygularız. İşlev önce ilk paragrafa uygulanır, sonra ikinciye, üçüncüye ve bu şekilde devam eder.

İşlev içinde this, işlevin uygulandığı öğeyi gösterecektir - önce bu ilk öğe olacak, sonra ikinci ve bu şekilde devam edecek. $(this) gibi bir yapı ile, normal JavaScript this'ı yerine bir jQuery öğesi elde ederiz ve ona html metodunu uygularız, bu metod öğemizin metnini alır. Sonrasında ise basitçe ekranda gösterilir:

/*
	test fonksiyonunun adını tırnaksız ve () olmadan yazıyoruz,
	çünkü onun koduna ihtiyacımız var, sonucuna değil:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

Bu görevi çözmek için anonim fonksiyonlar da kullanılabilir - bu genellikle daha sık yapılır:

$('.www').each(function() {
	alert($(this).html());
});

Ayrıca each metoduna parametreli bir callback fonksiyonu da iletebiliriz.

Şimdi bir sonraki örnekte, sayfadaki tüm li öğelerinin sonuna sıra numaralarını ekleyelim. Şimdi anonim fonksiyonumuza öğenin indeksini ve kendisini ileteceğiz:

$('li').each(function (index, elem) {
	$(elem).append(index);
});

Şimdi elem yerine this kullanalım:

$('li').each(function (index) {
	$(this).append(index);
});

Tüm li öğelerinin içeriğini sıra numaralarıyla değiştirin.