jQuery each(): คู่มือวนลูป DOM Elements แบบละเอียด

jQuery each() เป็นวิธี concise วนลูป DOM elements เรียกบน jQuery object (object ที่มี DOM elements 1+ และเข้าถึง jQuery methods ได้) ต้องการ callback function - function ส่งให้ function อีกตัว execute ภายหลัง ใน callback เข้าถึง index และ element ได้

การใช้งานตรงไปตรงมาคล้าย JS loops แต่มีจุดสับสนบ้าง จะอธิบาย syntax และ best practices พร้อมตัวอย่าง step-by-step

jQuery each() คืออะไร?

Loop method ของ jQuery library ทำงานคล้าย JS loop วนลูป DOM elements ต้องการ callback function ใน callback body จัดการ DOM elements ได้ ใช้ conditional statements (if...then) เปลี่ยน selected elements บางส่วนได้ = control ลึกขึ้น

jQuery each() Syntax

เรียกได้ 2 แบบ แบบแรก: method บน selected element callback รับ 2 optional arguments: index, value

• index: index number ของ current element (เริ่ม 0)
• value: current element ต้อง wrap ใน jQuery selector $(value) ถ้าจะ chain method

$('div').each((index, value) => {
  console.log(`${index}: ${$(value).text()}`);
});

select ทุก <div> ลูปแต่ละรอบเข้าถึง index และ value $(value) อย่างเดียวให้ [object Object] ต้อง call method เช่น text() ดึงค่าจริง

ไม่ต้องการ index ใช้ this keyword:

$('div').each(function() {
  alert($(this).text());
});

this ใน callback scope = element เดียวกับ value variable ไม่สามารถใช้ this ใน arrow function ได้ (arrow function ไม่ bind this) ควรใช้ traditional function notation สำหรับ jQuery callbacks

ตัวอย่าง jQuery each()

HTML: ลิสต์สีต่าง class

<div class="colorSelect">Red</div>
<div>Pink</div>
<div class="color">Orange</div>
<div class="colorSelect">Purple</div>
<div class="colorSelect">Blue</div>

1. Log text ด้วย arrow function และ traditional function

// Arrow function
$('.colorSelect').each((index, value) => {
  console.log($(value).text());
});

// Traditional function (ใช้ this)
$('.colorSelect').each(function() {
  console.log($(this).text());
});

ทั้งคู่ log "Red", "Purple", "Blue" (select class colorSelect เท่านั้น)

2. เปลี่ยนสีข้อความด้วย conditional statement

เพิ่ม CSS:

<style>
.colorSelect { color: blue; }
.green { color: green; }
</style>

โค้ด: เปลี่ยนสีแค่ Red และ Blue (ไม่ใช่ Purple)

$('.colorSelect').each(function() {
  if ($(this).text() !== "Purple") {
    $(this).toggleClass('green');
  }
});

ลูป <div> class colorSelect เช็ค text ไม่ใช่ "Purple" -> toggleClass 'green' (สีเขียว) ผล: Red และ Blue กลายสีเขียว Purple คงเดิม

สรุป

jQuery each() ทำงานคล้าย JS iterators สำหรับ jQuery objects ครอบ syntax best practices: ใช้ traditional function notation สำหรับ callbacks (arrow functions limited) ใช้ conditional statements ใน loop body ควบคุม element เฉพาะที่ผ่านเงื่อนไข ลองฝึกเล็กๆ แล้วค่อยขยายไปใช้งานจริง