Top Menu

Contoh Coding Penggunaan Jquery Foreach .Each()

By joe

Posted in , , | Tags : , ,

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 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/

Share this story

About The joe

Bali Media Komputer adalah sebuah perusahaan yang bergerak di bidang pengadaan komputer, perlengkapan dan aksesoris komputer. Call Us : 0821 4567 5758

Related Posts

Comments are closed.
btt
BaliMediakomputer.com Toko Online Jual Produk Hardware Resmi Di Denpasar Bali Dengan Pelayanan Tercepat, Aman dan Terpercaya. Call Us 082145675758 - 087762649000 / Email : info@balimediakomputer.com
error: Alert: Content is protected !!