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().

 saja akan menjelaskan bagaimana untuk melaksanakan iterasi atau loop sebuah elemen array  Contoh Coding Penggunaan jQuery Foreach .each()

jQuery dan Javascript

Berikut yakni beberapa pola 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, Kamu sanggup memakai sintak dibawah ini

jQuery.each( array, callback )

Atau

$.each( array, callback )

Namun kalau kamu akan menggunakannya pada sebuah array kamu sanggup memakai callback berikut ini:

Function(index,eachObject)

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

Function(properityName,object)

Untuk melaksanakan perulangan pada sebuah elemen list DOM, Kamu 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

kamu sanggup memakai code dibawah ini untuk melaksanakan iterasi pada sebuah array / array JSON. Di dalam fungsi callback, Kamu 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());
})