Bu yazımıza, jQuery filtreleme fonksiyonlarının önemli bir üyesi olan ".each" fonksiyonu ile devam ediyoruz.
Filtreleme fonksiyonlarının genel açıklamaları için önceki dersimizi inceleyebilirsiniz.
Bu fonksiyon seçilen nesne grubunun her bir elemanı için belirlediğimiz fonksiyonu uygular.
Syntax:
<script type="text/javascript">
$("div").each(function(index, value) {
alert('div' + index + ':' + $(this).attr('id'));
});
</script>
".each" içinde yer alan fonksiyon "(function(index, value))" iki adet parametre alabilir, bunlardan ilki nesnenin "index" numarası, ikinci ise "değeridir(value)". Uyguladığınız her bir nesneyi index numarasına göre sıralayacak.
Uygulama:
Fonksiyonun genel mantığını vermek adına basit bir uygulama olacak. "Liste id bilgileri" butonuna bastığınızda, liste elemanlarının "id" bilgileri uyarı mesajı ile gösterilecek
- Liste-1
- Liste-2
- Liste-3
- Liste-4
- Liste-5
CSS yapısı:
#listeId{
width:100px;
}
HTML yapısı:
<ul id="listeId" style="width:100px">
<li id="list1">Liste-1</li>
<li id="list2">Liste-2</li>
<li id="list3">Liste-3</li>
<li id="list4">Liste-4</li>
<li id="list5">Liste-5</li>
</ul>
<button value="" onclick="startProg()">Liste id bilgileri</button>
jQuery yapısı:
<script type="text/javascript">
function startProg(){
$("#listeId li").each(function(index){
alert("Liste Index"+index+":"+$(this).attr('id'));
});
}
</script>
Açıklamalar:
- 3. "listeId" id'li "ul" etiketi içindeki her bir "li" etiketi, ".each" fonksiyonu ile taranıyor ve her birinin "id" bilgisi uyarı mesajı olarak gösteriliyor.
Not 1: JQuery kulanımı normal javascript kullanımını etkilemez, normal javascript kodlarınız içinde jQuery kullanabildiğiniz gibi, jQuery kodlaması içinde de standart javascript kodlarınızı rahatça kullanabilirsiniz.
Not 2: Bu örneğimizde jQuery'inin dökümanı hazırlayan "($(document).ready())" tanımlamasını yapmadan standart javascript kodlamalarımızdaki gibi bir fonksiyon tanımlayıp, içini jQuery ile kodladık. Burdaki durumda, kodlarımız ilgileneceğimiz nesnelerden sonra yaratıldığı ve de bir "olay-event" (onclick) aracılığıyla tetiklendiği için, kodların nesneyi görmeme durumu söz konusu değildir, bu sebepten herhangi bir problemle karşılaşmayız.
Kolay gelsin, görüşmek üzere...
