Contoh Coding Penggunaan jQuery Foreach .each()

Oleh | pada 31 Agu, 2017 | 0 Komentar

Pada artikel contoh penggunaan jQuery foreach .each() kali ini, saja 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());
 })

Label: 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

Tentang Penulis

Netrix Ken

Netrix Ken
  • Profil Penulis

Menyukai dunia IT dan suka berbagi pengalaman melalui Internet.

Baca Juga

  • Menampilkan Product Key Microsoft Office Tanpa Aplikasi Tambahan

    Menampilkan Product Key Microsoft Office Tanpa Aplikasi Tambahan

    26 Apr, 2016 - 4 KomentarJika Anda kehilangan product key atau serial Microsoft Office Anda, atau lupa menyimpannya dimana
  • Download Avira 2012 Beta

    Download Avira 2012 Beta

    24 Mar, 2017 - 2 KomentarIni adalah waktu tahunan dimana pengembang software keamanan mengeluarkan update tahunan rutin
  • Download Gratis USB Disk Ejector, Alternatif USB Safely Remove

    Download Gratis USB Disk Ejector, Alternatif USB Safely Remove

    3 Des, 2016 - 0 KomentarAplikasi yang memiliki fungsi yang sama dengan USB Safely Remove ini bisa dijadikan alternatif
  • 10 Tips Menggunakan Mesin Pencari Bing!

    10 Tips Menggunakan Mesin Pencari Bing!

    2 Apr, 2017 - 1 KomentarHingga saat ini, Google masih menjadi yang nomer 1 dalam layanan mesin pencari atau search engine.
  • Kebijakan Privasi

    Kebijakan Privasi

    20 Feb, 2012 - Komentar DitutupPada www.aplikasipc.com privasi dari pengunjung sangat penting bagi kami. Kebijakan privasi ini

Tinggalkan Komentar

Kirim Komentar

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