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

CodingDOMIterasijQueryObject cara menggunakan foreachcontoh iterasi codingcara each jquerycoding dalam jquery fungsinyapengertian index dalam jqueryfungsi each jquerykegunaan each jquerycontoh program coding foreachmethod each pada jquerycontoh 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

    31 Mar 2023 - 47 Komentar
  • Download Antivirus Avira 2012 Beta Untuk Windows

    Download Antivirus Avira 2012 Beta Untuk Windows

    27 Sep 2021 - 2 Komentar
  • Cara Cek Pemakaian / Penggunaan Data Internet di Windows 10

    Cara Cek Pemakaian / Penggunaan Data Internet di Windows 10

    21 Mei 2018 - 2 Komentar
  • 10 Tips Menggunakan Mesin Pencari Bing!

    10 Tips Menggunakan Mesin Pencari Bing!

    17 Mar 2024 - 1 Komentar
  • Download Gratis USB Disk Ejector, Alternatif USB Safely Remove

    Download Gratis USB Disk Ejector, Alternatif USB Safely Remove

    6 Mei 2019 - 0 Komentar
  • Kebijakan Privasi

    Kebijakan Privasi

    20 Feb 2012 - Komentar Ditutup
  • Setting E-mail di Handphone

    Setting E-mail di Handphone

    8 Mei 2023 - 11 Komentar
  • Download Update Windows 10 build 14393.103 (KB3176938)

    Download Update Windows 10 build 14393.103 (KB3176938)

    11 Nov 2018 - 2 Komentar
  • Cara Mengatur Konsumsi Daya di Windows 11 | Power Mode

    Cara Mengatur Konsumsi Daya di Windows 11 | Power Mode

    7 Apr 2022 - 0 Komentar
  • Cara Mempercepat Proses Restart Komputer

    Cara Mempercepat Proses Restart Komputer

    31 Mar 2023 - 14 Komentar

Pertanyaan & Diskusi

Kirim Komentar

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