Contoh Coding Penggunaan jQuery Foreach .each()

Oleh Netrix Ken

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

jQuery dan Javascript

jQuery dan Javascript

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());
})

ArrayCodingDOMIterasijQueryObject cara menggunakan foreachcontoh iterasi codingcara each jquerycoding dalam jquery fungsinyapengertian index dalam jqueryfungsi each jquerykegunaan each jquerycontoh program coding foreachmethod each pada jquerycontoh jquerypenggunaan each jqueueach javascript pengertiancara menulis fungsi perulangan pada jqueryfungsi each pada jquerycontoh penggunaan jquery

Pertanyaan & Diskusi

Kirim Komentar

© 2021AplikasiPC. Hak cipta dilindungi.
Dibawah lisensi AskNet Media.