Bu yazımıza, jQuery filtreleme fonksiyonlarının önemli bir diğer fonksiyonu olan ".map" fonksiyonu üzerine bir uygulamayla devam ediyoruz:
Filtreleme fonksiyonlarının genel açıklamaları için önceki dersimizi inceleyebilirsiniz.
Bu fonksiyon seçilen nesne grubunu diziye çevirir.
Uygulama:
Fonksiyonun genel mantığını vermek adına basit bir uygulama olacak. "Liste ID Bilgisi" butonuna bastığınızda liste elemanlarını bir diziye aktaracak ve rapor kısmına yazacak.
- Liste-1
- Liste-2
- Liste-3
- Liste-4
- Liste-5
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>
<div id="report"></div>
<button value="" onclick="startProg()">Liste ID Bilgisi</button>
jQuery yapısı:
<script type="text/javascript">
function startProg(){
var icerik= $('#listeId li').map(function(){
return this.id;
}).get().join(":");
document.getElementById("report").innerHTML=icerik;
}
</script>
Açıklamalar:
- 3. "listeId" id'li nesnemizin sahip olduğu "li" etiketlerinin id değerlerini, ".map" fonksiyonu ile "içerik" değişkenine dizi halinde atadık (return this.id),
- 5. Tüm atama işlemi bittikten sonra, get() metoduyla dizi elemanlarını çekip join(":") metoduyla --belirtilen karakter ile (:)-- birbirine ekledik
- 6. Sonucu "report" id'li katmanın (div) içine yazdırdık (innerHTML)
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...
