Contoh Coding Penggunaan jQuery Foreach .each()

Pada artikel contoh penggunaan jQuery foreach .each() kali ini, saya akan menjelaskan bagaimana untuk melakukan iterasi atau loop sebuah elemen array / objek / elemen DOM menggunakan fungsi jQuery .each().

Berikut adalah beberapa contoh jQuery foreach yang akan saya jelaskan.

1. Sintak jQuery .each()
2. Iterasi / loop sebuah array
3. Iterasi / loop sebuah objek
4. Iterasi / loop sebuah elemen DOM

Contoh Penggunaan jQuery .each()

Untuk melakukan perulangan pada sebuah array atau objek, kita dapat menggunakan sintak dibawah ini

jQuery.each( array, callback )

Atau

$.each( array, callback )

Jika Anda akan menggunakannya pada sebuah array Anda dapat menggunakan callback berikut ini:

Function(index,eachObject)

Sebaliknya, jika Anda ingin menggunakannya pada sebuah objek, Anda dapat menggunakan callback berikut ini:

Function(properityName,object)

Untuk melakukan perulangan pada sebuah elemen list DOM, kita dapat menggunakan sintak berikut ini:

$(selector).each(callback)

Dimana tipe callback diatas adalah:

Function(integer,element)

Catatan: Fungsi jQuery.each() & $(selector).each() bukan merupakan satu fungsi yang sama meskipun melakukan tugas yang identik.

Contoh Coding jQuery Iterasi Array

Anda dapat menggunakan code dibawah ini untuk melakukan iterasi pada sebuah array / array JSON. Di dalam fungsi callback, kita dapat menggunakan kata kunci this untuk mengakses objek yang dimaksud.

// Contoh: 1
var arr =[1,2,4,5,6];
$.each(arr,function(index,obj)
{
// Kita dapat mengakses objek menggunakan this
alert("index:"+index + " , value: "+obj +" , value:"+this);

});

// Contoh: 2 (JSON Array)
var arr2 =[{
name:"Ravi",
age:33,
loc:"Indonesia",
},
{
name:"Haya",
age:4,
loc:"Amerika"
},
{
name:"Geek",
age:4,
loc:"Singapura"
}];
$.each(arr2,function(index,obj)
{
alert("Name: "+obj.name+"\n"+"Age:"+obj.age+"\n"+"Location: "+obj.loc+"\n");
});

Contoh Loop jQuery Pada Sebuah Objek

var obj = { name: "ravi", age: 33, loc: "Indonesia", gender: function() { return "M"} }
$.each(obj,function(prop,obj)
{
alert("prop:"+prop + " , value: "+obj);

if($.type(obj) == "function")
{
alert(" gender:" + obj());
}
});

Catatan: Kita dapat mengakses fungsi diatas dan memanggilnya menggunakan objek.

Loop Elemen List DOM menggunakan jQuery $.each()

// Untuk melakukan iterasi pada setiap link pada halaman: <a hre=""></a>
$('a').each(function(index,obj)
{
alert($(obj).attr("href")+" "+$(this).html());
});

// Untuk melakukan iterasi pada setiap elemen <input>
$('input').each(function()
{
alert($(this).val());
})

// Untuk melakukan iterasi pada setiap elemen dengan nama class "myClass"
$('.myClass').each(function()
{
alert($(this).html());
})