Açıklama : Bir jQuery nesnesi üzerinden iterasyon yapar, her eşleşen eleman
için fonksiyon çalıştırılır.
.each( function )
function
Tip :
Fonksiyon(
integer index,
element eleman )
Her eşleşen eleman üzerinde uygulanacak fonksiyon.
.each() metodu DOM elemanları üzerinde yapılacak iterasyonların kısa ve hataya
meydan vermeyecek şekilde olmasını sağlar. Çağrıldığında verilen jQuery nesnesinin parçaları
olan DOM elemanları üzerinden iterasyon yapar. Callback fonksiyon her çalıştığında sıfırdan
başlar şekilde bulunulan iterasyon döngüsüne verilir. Daha önemlisi callback ateşlendiğinde
kapsam o anda bulunulan DOM elemanıdır ve this kelimesi iterasyonda o anda işlenen
elemanı gösterir.
Sayfanızda basit bir sırasız liste olduğunu düşünün:
<ul>
<li>foo</li>
<li>bar</li>
</ul>
Liste elemanlarını seçip onlar üzerinde iterasyon yapabilirsiniz:
$( "li" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});
Listedeki her eleman için konsola bir mesaj yazılacaktır.
0: foo
1: bar
Döngüyü callback fonksiyonundan false değer döndürerek istediğiniz anda bitirebilirsiniz.
Not : bir jQuery nesnesi dönen birçok jQuery metodu, ayrıca bir jQuery nesnesi içindeki
bir set eleman üzerinde iterasyon yaparak çalışır - buna örtülü yineleme (implicit
iteration) denir. Bu oluştuğunda genellikle .each() ile harici bir iterasyon
yapmanıza gerek kalmaz.
// Burada .each() metoduna gerek yoktur:
$( "li" ).each(function() {
$( this ).addClass( "foo" );
});
// Bunun yaerine jQuery örtülü iterasyon kullanır:
$( "li" ).addClass( "bar" );
Örnekler :
3 adet <div> üzerinde iterasyon yaparak color özelliklerini
değiştir.
<style>
div {
color: red;
text-align: center;
cursor: pointer;
font-weight: bolder;
width: 300px;
}
</style>
<div>Bu div'ler</div>
<div>üzerinde iterasyon için</div>
<div>buraya tıklayın.</div>
<script>
$( "body" ).on( "click", function() {
$( "div" ).each( function( i ) {
if ( this.style.color !== "blue" ) {
this.style.color = "blue";
} else {
this.style.color = "";
}
} );
} );
</script>
Bu div'ler
üzerinde iterasyon için
buraya tıklayın.
Standart DOM elemanı yerine jQuery nesnesine erişmek için örnek gibi $( this )
kullanın.
<style>
ul {
font-size: 18px;
margin: 0;
}
span {
color: blue;
text-decoration: underline;
cursor: pointer;
}
.example {
font-style: italic;
}
</style>
Yapılacaklar listesi : <span>(değiştirmek için buraya tıklayın)</span>
<ul>
<li>Yemek ye</li>
<li>Uyu</li>
<li>Evlen</li>
</ul>
<script>
$( "span" ).on( "click", function() {
$( "li" ).each(function() {
$( this ).toggleClass( "example" );
});
});
</script>
Yapılacaklar listesi :
(değiştirmek için buraya tıklayın)
each() döngüsünden bitmeden önce çıkmak için return false; satırı kullanın.
<style>
div {
width: 40px;
height: 40px;
margin: 5px;
float: left;
border: 2px blue solid;
text-align: center;
}
span {
color: red;
}
</style>
<button>Renkleri Değiştir</button>
<span></span><br>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop"><small>Dur</small></div>
<div></div>
<div></div>
<div></div><br><br>
<script>
$( "button" ).on( "click", function() {
$( "div" ).each(function( index, element ) {
// element == this
$( element ).css( "backgroundColor", "yellow" );
if ( $( this ).is( "#stop" ) ) {
$( "span" ).text( "div index #" + index + "'de durdu");
return false;
}
});
});
</script>