Cách hoạt động của jQuery each()

jQuery each() là gì?

jQuery each là phương thức vòng lặp cho thư viện jQuery. Hoạt động như vòng lặp JavaScript bằng cách lặp qua các phần tử DOM. jQuery each() yêu cầu hàm callback, và bên trong callback là nơi thao tác các phần tử DOM.

Trong body của callback, câu lệnh điều kiện (conditional statements) có thể dùng để thay đổi một số phần tử được chọn. Câu lệnh điều kiện là câu lệnh if...then trong JavaScript. Cung cấp mức kiểm soát sâu hơn về cách chính xác các phần tử bị thay đổi.

Cú pháp jQuery each()

jQuery each có thể gọi theo hai cách. Thứ nhất, như phương thức gọi trên phần tử được chọn. Hàm callback chấp nhận tối đa hai đối số tùy chọn: index và value. Index là số chỉ mục của phần tử hiện tại. Nếu phần tử hiện tại là đầu tiên trong danh sách, index trả về 0.

Đối số value tham chiếu đến phần tử hiện tại. Quan trọng: để chain phương thức vào value cần bọc value trong bộ chọn jQuery. Hãy đưa tất cả vào code trừu tượng để phân tích cú pháp.

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

Ở đây, ta chọn mỗi <div> trên trang và lặp qua nó. Mỗi lần lặp, có quyền truy cập vị trí index và value của phần tử hiện tại. Trả về đơn giản $(value) cho kết quả [object Object].

Nhớ [object Object] là biểu diễn chuỗi của một object. Nghĩa là cần gọi phương thức trích xuất giá trị chính xác muốn. Ở trên, dùng phương thức text() tiết lộ thuộc tính text của object.

Ví dụ trên sẽ log số index theo sau thuộc tính text cho mỗi <div>. Nếu không cần truy cập index, có thể refactor code:

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

Viết như này cũng log text của <div> hiện tại. Trong scope callback này, từ khóa this cũng tham chiếu đến phần tử trước đó được gọi bởi biến value. Lưu ý: không thể truy cập từ khóa this trong arrow function.

Arrow function là cách viết hàm gọn thay thế viết function truyền thống, nhưng nó không bind với từ khóa this. Nói cách khác, object trả về dùng this trong arrow function không giống this khi viết ký hiệu hàm truyền thống.

Ví dụ jQuery each()

Mở rộng ví dụ cú pháp trên và thêm thuộc tính. Bắt đầu với HTML render cơ bản danh sách màu thuộc các class khác nhau.

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

Render từng phần tử text trong DOM. Đầu tiên, log text ra console dùng cả arrow function và function truyền thống.

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

Chọn chỉ <div> có class colorSelect, log text Red, Purple, Blue. Chú ý bọc value trong instance jQuery mới để gọi phương thức jQuery text(). Làm vậy trả về text của các <div> được chọn.

Trả về cùng kết quả, nhưng dùng từ khóa this.

$('.colorSelect').each(function() {
  console.log($(this).text())
})

Có thể dùng anonymous function (hàm không tên) làm callback. Lại trả về Red, Purple, Blue. Đáng nói: dù arrow function có chức năng trong jQuery, best practice dùng ký hiệu hàm truyền thống cho jQuery callbacks.

Bây giờ biết lặp qua tập hợp phần tử. Hãy vui một chút và đổi màu!

<div class="colorSelect">Red</div>
<div>Pink</div>
<div class="color">Orange</div>
<div class="colorSelect">Purple</div>
<div class="colorSelect">Blue</div>
<div class='result'></div>
<style>
  .colorSelect { color: blue; }
  .green { color: green; }
</style>

Giữ trang danh sách màu, thêm class vào <style>.

Trong ví dụ này, gán <div> class colorSelect màu xanh. Có thể dùng câu lệnh điều kiện chỉ đổi hai trong ba phần tử được chọn sang màu xanh lá.

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

Gọi each() trên <div> khớp class selector. Dùng câu lệnh điều kiện kiểm tra từng phần tử xem text property có phải "Purple" không. Trong body điều kiện, có instance this khác.

this trong body điều kiện tham chiếu đến các thuộc tính text thỏa mãn điều kiện. Dựa trên output, biết this trong body điều kiện tham chiếu text "Red" và "Blue".

Vì "Red" và "Blue" khác "Purple", dùng jQuery toggleClass đổi class gốc sang class green. Để tìm hiểu thêm về jQuery toggleClass(), khuyên đọc bài này.

Kết luận

Ta đã đi qua nhiều nội dung. Đầu tiên, học jQuery each() hoạt động giống các iterator JavaScript khác, chỉ dành cho jQuery objects. Sau đó bao gồm best practice cú pháp và vấn đề tiềm ẩn viết arrow function và function truyền thống.

Trong ví dụ, thấy arrow function hữu ích nhưng giới hạn. Nhắc nhở: tránh đau đầu, dùng ký hiệu hàm truyền thống cho tất cả jQuery callbacks.

Sau đó vui một chút đổi màu text attribute. Dùng câu lệnh điều kiện trong body vòng lặp each(), thấy cách chọn và thay đổi chỉ phần tử thỏa điều kiện.

Bây giờ tùy bạn thực hành pattern lặp jQuery each() mới tìm được. Bắt đầu nhỏ rồi xây dựng lên xem each() có thể làm gì.