jQuery each Kullanımı

Yazıda jQuery kütüphanesi içerisinde döngü kurmayı kolaylaştıran foreach olarak bilinen each metodu kullanımı çeşitli örneklerle anlatılmıştır.

JavaScript ile döngü yazmak kolay olsa da HTML elemanları üzerinde işlem yaparken daha fazla kod yazılmasına neden olur.

jQuery içerisinde bulunan each metodu HTML elemanları, diziler ve nesneler için döngü işlemi yapılmasını sağlar.

Örnek jQuery each kullanımı aşağıda yer almaktadır.

Aşağıdaki gibi bir alışveriş listemiz olsun.

<h3>Alışveriş Listesi</h3>
  <p>Elma</p>
  <p>Armut</p>
  <p>Portakal</p>
  <p>Muz</p>
  <p>Kivi</p>
  <p>Karpuz</p>
  <p>Çilek</p>

Alışveriş listesine sıra numarası eklemek için each metodunu kullanabiliriz.

<script>
"use strict";
  $(function() {
    $("p").each(function(index, element) {
      $(this).prepend((++index) + " ");
    });
  });
</script>

NOT: jQuery kütüphanesi eklendiği varsayılmıştır.

jQuery each metodu parametre olarak her bir elemanda çalıştırılacak fonksiyon alır.

Çalıştırılacak fonksiyon parametresi de iki parametre alır.

Parametrelerin ilki sıra numarası, ikincisi ise HTML nesnesidir.

Sıra numarası dizilerde olduğu gibi sıfırdan (0) başlar.

Örnekte sayfa hazır olduğunda, sayfa içerisinde bulunan tüm paragraf etiketleri each metodu ile döngü işlemine alınır.

Her döngü adımında parametre fonksiyon elemanın önüne sıra numarasını ekler.

Dizi ve nesnelerde kullanmak

jQuery each metodu diziler ve nesneler üzerinde döngü işlemi yapılmasını sağlar.

Örnek kullanım aşağıda yer almaktadır.

<script>
"use strict";
var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];

  $(function() {
    $.each(liste, function(index, value) {
      $("body").append("<p>" + ++index + " " + value + "<p>");
    });
  });
</script>

Bu kullanımda dikkat edilmesi gereken HTML nesnesini seçmeden işlem yaptığımız ve each metodunun ilk parametresinin dizi değişken ismi olduğudur.

Döngüyü sonlandırmak (kırmak) için return false; anahtar kelimeleri kullanılır.

<script>
"use strict";
var liste = ["Elma", "Armut", "Portakal", "Muz", "Kivi", "Karpuz", "Çilek"];

  $(function() {
    $.each(liste, function(index, value) {
      $("body").append("<p>" + ++index + " " + value + "<p>");
      if (index == 3) return false;
    });
  });
</script>

jQuery each metodu nesnelerde de döngü işlemi için kullanılır.

<script>
"use strict";
var bilgiler = {
  adi: "Yusuf",
  soyAdi: "SEZER",
  yas: 75,
  ulke: "Türkiye"
};

  $(function() {
    $.each(bilgiler, function(key, value) {
      $("body").append("<p>" + key + " : " + value + "<p>");
    });
  });
</script>

Parametre olarak aldığı fonksiyonun ilk parametresi (key) nesne özelliğinin adıdır.

İkinci parametre ise nesne özelliği değeridir.

Hayırlı günler dilerim.