JQUERY HER() YÖNTEMI

her biri() jQuery'deki yöntem, eşleşen her öğe için çalışan bir işlevi belirtir. JQuery'de yaygın olarak kullanılan geçiş yöntemlerinden biridir. Bu yöntemi kullanarak jQuery nesnesinin DOM öğelerini yineleyebilir ve eşleşen her öğe için bir işlev çalıştırabiliriz.

yığın sıralama

her biri() bir parametreyi kabul eder fonksiyon(indeks,öğe) bu, seçilen her öğe için yürütülen bir geri çağırma işlevidir. Bu fonksiyon ayrıca isteğe bağlı olarak indeks ve eleman olmak üzere iki parametre gerektirir. Bu nedenle, her() yöntemine bir geri çağırma işlevi aktarmamız gerekir.

Biz de geri dönebiliriz YANLIŞ Döngüyü erken durdurmak için geri çağırma işlevinden.

Sözdizimi

 $(selector).each(function(index, element))

Parametre değerleri

Kullanılan parametre değerleri her biri() yöntem aşağıdaki gibi tanımlanmıştır.

fonksiyon(indeks,öğe): Zorunlu bir parametredir. Seçilen her öğe için yürütülen bir geri çağırma işlevidir. Aşağıdaki gibi tanımlanan iki parametre değeri vardır.

dizin:Seçicinin indeks konumunu belirten bir tamsayı değeridir.eleman:Mevcut unsurdur. Şu anda eşleşen öğeye atıfta bulunmak için bu anahtar kelimeyi kullanabiliriz.

Anlamak için bazı resimlere bakalım her biri() yöntemini açıkça belirtin.

Örnek 1

Bu örnekte, her biri() Butona tıkladığınızda yöntem tetiklenecektir. Bu yöntemi şuraya uyguluyoruz: O elementler. Yani bu yöntem her biri üzerinde yinelenecektir. O eleman. İşlev seçilen her biri için yürütülür O ve ilgili metnin metnini görüntüler O uyarı kutusunu kullanan öğe.

Burada geri çağırma fonksiyonunun parametre değerlerini kullanmıyoruz.

 jQuery each() method <h2> Welcome to the javaTpoint.com </h2> <ul> <li> First element </li> <li> Second element </li> <li> Third element </li> <li> Fourth element </li> </ul> <p> Click the following button to see the list of <b> li </b> elements. </p> Click me function fun(){ $(document).ready(function(){ $(&apos;li&apos;).each(function(){ alert($(this).text()) }); }); }

Çıktı

Şimdi Test Edin

Yukarıdaki kodun yürütülmesinden sonra çıktı şu şekilde olacaktır:

Butona tıkladığınızda aşağıdaki gibi bir uyarı görüntülenecektir.

Benzer şekilde, dört alarm kutusu nedeniyle dört uyarı kutusu görüntülenecektir. O elementler.

Örnek2

Bu örnekte geri çağırma fonksiyonunun parametre değerlerini kullanıyoruz. dizin Ve eleman .

Biz uyguluyoruz her biri() yöntem O elementler. Yani yöntem indeksten başlayarak li elemanları üzerinde yinelenecektir. 0 . Seçilen her birinde yürütülecek O öğesini seçin ve karşılık gelen öğenin arka plan rengini değiştirin.

İşlev geri döndüğünde yineleme durur YANLIŞ . Burada altı tane var O elemanlara ulaşır ve fonksiyon elemana ulaştığında durur. kimlik = 'i4' . Dördüncü element olmasına rağmen indeks şuradan başlar: 0 yani elemanın konumu 3 .

 jQuery each() method body{ text-align: center; } ul{ list-style-type: none; float: left; } li { width: 40px; height: 40px; margin: 5px; padding: 5px; font-size: 20px; float: left; border: 2px solid blue; } button{ font-size: 20px; } <h2> Welcome to the javaTpoint.com </h2> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li id="i4"> Stop </li> <li> 5 </li> <li> 6 </li> </ul> Click me function fun() { $(document).ready(function(){ $(&apos;li&apos;).each(function(index, element) { $(element).css(&apos;background&apos;, &apos;lightgreen&apos;); if ($(this).is(&apos;#i4&apos;)) { $(&apos;p&apos;).text(&apos;Index begins with 0. So, the function stopped at position: &apos; + index ).css(&apos;fontSize&apos;, &apos;20px&apos;); return false; } }); }); }