jQuery .each()
Tabel Konten
.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>
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>
5 Komentar
Rdk
Terima kasih kang, kebetulan saya lagi belajar cara membuat tampilan blog kang ismet, setiap label beda warna :-bd
Unknown
Kalau Cuman buat postingan berbeda-beda seperti punya kang is. coba saja baca ini bro.
Tampilan Posting Berbeda sesuai label
Unknown
Kang taufik ini q sdah pahami langkah-nya kang trus q kan pengen efek thumbnail kya INI INI
trus q dah coba pake
.slideToggle
dan tak simulasikan DISINI .berfungsi kang efec
.slideToggle
tp kenapa kang ya kok ketika di klik semua efectnya ikut jalan padaha sudh tak kasih fungsi.each
disituTaufik Nurrohman
Lebih sederhana dari perkiraanmu:
→ http://jsfiddle.net/tovic/xna80ugf/1
Unknown
heheh ya kang mantap wes pokoke :-bd , oalah gak o pake .each bisa toh :yaya: