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

jQuery dan Javascript

Berikut yaitu beberapa referensi jQuery foreach yang akan aku 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 melaksanakan perulangan pada sebuah array atau objek, kita sanggup memakai sintak dibawah ini

jQuery.each( array, callback )

Atau

$.each( array, callback )

Jika Anda akan menggunakannya pada sebuah array Anda sanggup memakai callback berikut ini:

Function(index,eachObject)

Sebaliknya, jikalau Anda ingin menggunakannya pada sebuah objek, Anda sanggup memakai callback berikut ini:

Function(properityName,object)

Untuk melaksanakan perulangan pada sebuah elemen list DOM, kita sanggup memakai 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 melaksanakan kiprah yang identik.

Contoh Coding jQuery Iterasi Array

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

// Contoh: 1
 var arr =[1,2,4,5,6];
 $.each(arr,function(index,obj)
 {
// Kita sanggup mengakses objek memakai 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 sanggup mengakses fungsi diatas dan memanggilnya memakai objek.

Loop Elemen List DOM memakai jQuery $.each()

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

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

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

Sumber https://product.balimediakomputer.com/