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
Contents
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.