.each() dipakai untuk menjalankan fungsi pada beberapa elemen sekaligus. Biasanya dipakai untuk menangani elemen-elemen yang sama namun mempunyai simpanan data yang berbeda. Data yang paling umum diambil dari elemen tentunya yaitu atribut dan konten elemen itu sendiri. Sebagai contoh, di sini Saya akan menerapkan warna latar yang berbeda pada masing-masing elemen menurut 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 dapat menerapkan fungsi di bawah ini alasannya yaitu 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 bermetamorfosis 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 yaitu masing-masing elemen akan dikenai warna sesuai dengan nilai kelasnya.
.each() dapat kita gunakan untuk merayapi masing-masing elemen terlebih dahulu sebelum pada kesudahannya kita dapat mengambil data di dalamnya untuk diterapkan sesuai impian tanpa harus mensugesti keadaan elemen sejenis yang lain:
$('div').each(function() { var color = $(this).attr('class'); $(this).css('background-color', color); });Sehingga hasilnya akan menjadi menyerupai 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>Contoh Lain
Menerapkan logika peningkatan nilai pada masing-masing elemen menurut indeks/urutannya. Urutan dimulai dari 0:
$('div').each(function(i) { $(this).text(i); // i = 0, 1, 2, 3, ... menurut 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 mendapat 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>