jQuery .each()

Tabel Konten
  1. Contoh Lain 
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

5 Komentar

  • Rdk

    Terima kasih kang, kebetulan saya lagi belajar cara membuat tampilan blog kang ismet, setiap label beda warna :-bd

  • 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 disitu

Komentar telah ditutup.