Bab 14: Looping dengan .each() jQuery – Iterasi Elemen HTML dengan Mudah

Bab 14: Looping dengan .each() jQuery – Iterasi Elemen HTML dengan Mudah

Setelah mempelajari Form Handling Dasar, kali ini kita akan membahas Looping dengan .each() jQuery. Method .each() memungkinkan Anda mengulangi setiap elemen HTML yang dipilih dan melakukan aksi tertentu pada masing-masing elemen.

Fitur ini sangat berguna untuk:

  • Memproses daftar elemen (list, table, form)
  • Mengubah banyak elemen sekaligus
  • Membuat interaksi dinamis pada beberapa elemen

1. Struktur Dasar .each()

Struktur dasar:

$(selector).each(function(index, element){
  // kode untuk setiap elemen
});
  • index → posisi elemen dalam selector (dimulai dari 0)
  • element → elemen HTML asli (DOM)

Catatan: Biasanya kita menggunakan $(this) untuk merujuk ke elemen saat ini dalam loop.

2. Contoh Looping Dasar

Mengubah teks semua elemen <li>:

$("li").each(function(index){
  $(this).text("Item ke-" + (index + 1));
});

Hasil: semua <li> akan diberi teks sesuai urutan.

3. Looping pada Input Form

Mengambil nilai semua input:

$("input[type='text']").each(function(){
  console.log($(this).val());
});

Mengubah nilai semua input:

$("input[type='text']").each(function(index){
  $(this).val("Input ke-" + (index + 1));
});

4. Looping dengan Kondisi

Anda bisa menambahkan kondisi di dalam .each().

Contoh:

$("li").each(function(index){
  if(index % 2 == 0){
    $(this).css("background-color", "lightgray");
  } else {
    $(this).css("background-color", "white");
  }
});

Hasil: elemen dengan index genap diberi background abu-abu, ganjil putih.

5. Contoh Lengkap Looping dengan .each()

<!DOCTYPE html>
<html>
<head>
  <title>Looping with each() jQuery</title>
  <style>
    li { margin: 5px; padding: 5px; list-style: none; border: 1px solid #ccc; }
  </style>
</head>
<body>

<ul id="list">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("#list li").each(function(index){
    $(this).text("Item ke-" + (index + 1));

    if(index % 2 == 0){
      $(this).css("background-color", "lightgray");
    } else {
      $(this).css("background-color", "white");
    }
  });
</script>

</body>
</html>

6. Tips dan Kesalahan Umum

  • ❌ Lupa menggunakan $(this) → tidak memanipulasi elemen saat ini
  • ❌ Salah penulisan selector
  • ❌ Mengubah DOM terlalu berat dalam loop besar → bisa memperlambat halaman
  • ❌ Tidak memahami index dimulai dari 0

Kesimpulan

Pada Bab 14: Looping dengan .each() jQuery, Anda telah mempelajari:

  • Struktur dasar .each()
  • Looping pada elemen <li> dan input form
  • Menggunakan kondisi di dalam loop

Method .each() membuat manipulasi banyak elemen HTML menjadi lebih efisien, terutama ketika bekerja dengan daftar panjang atau tabel.

Related Posts