Jqueryde each metodu ile belirtmiş olduğumuz etiketten kaç tane varsa o kadar döngü kurulacaktır. Bu döngü sayesinde döngü için belirtmilmiş etiketler arasında dögü sağlanırken index değeri ve elemanlara ulaşabilirsiniz ve gerekli işlemleri gerçekleştirebiliriz.
1.Örnek
İlk olarak basit bir örnekle 2 elemanlı sırasız bir liste tanımlayalım.
1 2 3 4 | <ul> <li>eleman1</li> <li>eleman2</li> </ul> |
Şimdi ise jquery’nin each metodu ile li eleman sayısı kadar dönüp index ve eleman değerlerini console.log’a yazdıran jquery kodu ise şu şekildedir.
1 2 3 | $("li").each(function(index) { console.log( index + ": " + $(this).text() ); }); |
Sonuç olarak çıktı şu şekilde olacak
1 2 | 0: eleman1 1: eleman2 |
2.Örnek
Sayfada bulunan tüm li etiketlerine class eklemek için ise iki yol vardır
Öncelikle each metoduyla yapalım örneğimizi
1 2 3 4 5 | $("li").each(function() { //sayfada bulunan 'li' etiketlerine each //metoduyla foor class'ını ekler $(this).addClass("foo"); }); |
Aynı örneği döngü olmadanda gerçekleştirebilirdik tek satırla
1 2 | //Sayfada bulunan tüm 'li' etiketlerine bar clasını ekler $( "li" ).addClass( "bar" ); |
3.Örnek
Şimdiki örneğimizde sayfaya alttaki kodda gözüktüğü gibi 3 tane div ekliyoruz.
1 2 3 | <div>sayfanın herhangi bir</div> <div>yerine tıklayın</div> <div>divlerin rengi değişecektir.</div> |
şimdi ise body içerisinde herhanbi bir yere tıklandığında divlerin rengini değiştiren jquery each döngüsünü alttaki gibi yazınız.
1 2 3 4 5 6 7 8 9 | $( document.body ).click(function() { $( "div" ).each(function( i ) { if ( this.style.color !== "blue" ) { this.style.color = "blue"; } else { this.style.color = ""; } }); }); |
