jQuery $.each kullanım örnekleri

JQuery’nın foreach ya da for eşdeğerinde olan $.each döngüsünün kullanımı, Jquery uygulamalarınızda bir çok açıdan kullanışlı olacaktır. Aşağıda diziler, nesneler ve HTML elemanları ile ilgili $.each kullanarak nasıl döngü yapılabilir örneklerini bulacaksınız.

JQuery $.each ile dizi döngüsü

$(function(){
    var dizi = ["araba", "uçak", "gemi", "bisiklet", "tren"];
    $.each(dizi, function(index, value){
        console.log("INDEKS: " + index + " DEGER: " + value);
    });
});

Yukarıdaki scriptin çıkışı aşağıdaki gibi olacaktır:

araba
uçak
gemi
bisiklet
tren

JQuery $.each ile objelerin döngüsü

Dizilerin yanısıra, bazen objeleride döngüye almak isteriz. Aşağıdaki kod JSON nesne döngüsü için bir örnektir.

$(function(){
    var obje = [
        {
            no: 1,
            ad: "Süleyman",
            soyad: "Sol",
        },
        {
            no: 2,
            ad: "Murat",
            soyad: "Demir",
        },
        {
            no: 3,
            ad: "Mustafa",
            soyad: "Alkan",
        },
    ];
    $.each(obje, function(){
        console.log("NO: " + this.no);
        console.log("İSİM: " + this.Ad);
        console.log("SOY İSİM: " + this.soyad);
        console.log(" ");
    });
});

Yukarıdaki scriptin çıkışı aşağıdaki gibi olacaktır:

NO: 1
İSİM: Süleyman
SOY İSİM: Sol

NO: 2
İSİM: Murat
SOY İSİM: Demir

NO: 3
İSİM: Mustafa
SOY İSİM: Alkan

JQuery $.each ile liste döngüsü

Aşağıdaki kod ‘liste’ sınıfına sahip bütün <ul> etiketi içindeki <li> elemanlarının yazı rengini $.each döngüsü ile green(yeşil)’e çevirir.

$(function(){
    $('.liste li').each(function(){
        $(this).css("color", "green");
    }
    });
});

JQuery $.each ile diğer HTML elemanları döngüsü

Liste elemanları yanı sıra her türlü HTML elemanlarınıda döngüde kullanabiliriz. Aşağıda örnekler bunlardan bazılarıdır.

$(function(){
    $('a').each(function(){ // sayfadaki tüm bağlantıları döngüde kullan
        $(this).prop("href", "#"); // bağlantıyı devre dışı bırak
    });
    $('.hide').each(function(){ // .hide sınıfina sahip tüm unsurları döngüde kullan ve sakla
        $(this).hide(); 
    });
    $('pre').each(function(){ // bütün pre etiketlerini bul ve ekle sınıfını ekle
        $(this).addClass("ekle");
    });
});