JQuery .each()

.each() digunakan untuk menjalankan fungsi pada beberapa elemen sekaligus. Biasanya digunakan untuk menangani elemen-elemen yang sama namun memiliki simpanan data yang berbeda. Data yang paling umum diambil dari elemen tentunya adalah atribut dan konten elemen itu sendiri. Sebagai contoh, di sini Saya akan menerapkan warna latar yang berbeda pada masing-masing elemen berdasarkan nilai kelas pada elemen tersebut:

<div class="red">Lorem ipsum</div>
<div class="green">Lorem ipsum</div>
<div class="blue">Lorem ipsum</div>
<div class="yellow">Lorem ipsum</div>
<div class="violet">Lorem ipsum</div>

Kita tidak bisa menerapkan fungsi di bawah ini karena ini hanya akan mengambil data dari salah satu elemen saja yang lebih dulu tertangkap:

var a = $('div').attr('class');
$('div').css('background-color', a);

Kode di atas akan mengambil data kelas elemen <div> pertama saja yaitu red, sehingga seluruh latar elemen akan berubah menjadi red:

<div class="red" style="background-color:red;">Lorem ipsum</div>
<div class="green" style="background-color:red;">Lorem ipsum</div>
<div class="blue" style="background-color:red;">Lorem ipsum</div>
<div class="yellow" style="background-color:red;">Lorem ipsum</div>
<div class="violet" style="background-color:red;">Lorem ipsum</div>

Padahal yang kita inginkan adalah masing-masing elemen akan dikenai warna sesuai dengan nilai kelasnya.

.each() bisa kita gunakan untuk merayapi masing-masing elemen terlebih dahulu sebelum pada akhirnya kita bisa mengambil data di dalamnya untuk diterapkan sesuai keinginan tanpa harus mempengaruhi keadaan elemen sejenis yang lain:

$('div').each(function() {
    var color = $(this).attr('class');
    $(this).css('background-color', color);
});

Sehingga hasilnya akan menjadi seperti ini:

<div class="red" style="background-color:red;">Lorem ipsum</div>
<div class="green" style="background-color:green;">Lorem ipsum</div>
<div class="blue" style="background-color:blue;">Lorem ipsum</div>
<div class="yellow" style="background-color:yellow;">Lorem ipsum</div>
<div class="violet" style="background-color:violet;">Lorem ipsum</div>

Lihat Demo

Contoh Lain

Menerapkan logika peningkatan nilai pada masing-masing elemen berdasarkan indeks/urutannya. Urutan dimulai dari 0:

$('div').each(function(i) {
    $(this).text(i); // i = 0, 1, 2, 3, ... berdasarkan urutan dalam kelompok elemen DIV
});

Akan menghasilkan:

<div class="red">0</div>
<div class="green">1</div>
<div class="blue">2</div>
<div class="yellow">3</div>
<div class="violet">4</div>

Dan dengan menerapkan angka-angka peningkatan tersebut, kita akan mendapatkan hasil berupa menara tangga:

$('div').each(function(index) {
    var color = $(this).attr('class');
    $(this).css({
        'background-color':color,
        'margin-right':(index*20) + 'px' // (0*20), (1*20), (2*20), ...
    });
    $(this).text(index); // 0, 1, 2, ...
});

<div class="red" style="background-color:red;margin-right:0px;">0</div>
<div class="green" style="background-color:green;margin-right:20px;">1</div>
<div class="blue" style="background-color:blue;margin-right:40px;">2</div>
<div class="yellow" style="background-color:yellow;margin-right:60px;">3</div>
<div class="violet" style="background-color:violet;margin-right:80px;">4</div>

Lihat Demo