Vòng Lặp .each()

Phương Thức .each()

Khi sử dụng bộ chọn lớp hoặc phần tử thông thường bạn sẽ nhận được nhiều hơn một phần tử trả về. Thư viện jQuery cho phép bạn lặp giữa các phần tử này một cách dễ dàng nhờ sử dụng phương thức each().

Ở ví dụ dưới đây chúng ta sử dụng bộ chọn phần tử $("p") và sau đó lặp qua từng phần tử trả về sử dụng phương thức each(). và cập nhật nội dung văn bản bên trong mỗi phần tử dựa trên vị trí của chúng trong mảng trả về:

var para= $("p");
para.each(function (index) {
    var text = $(this).text();
    $(this).text(text + index);
});

Chạy

Trong phương thức each() ở trên chúng ta sử dụng một biến đếm index như ở ví dụ trên để xuất ra giá trị của vị trí của phần tử trong mảng trả về từ bộ chọn. Trong JavaScript, các phần tử của mảng được đánh số bắt đầu từ vị trí số 0 nên giá trị của biến index trong vòng lặp đầu tiên sẽ là 0.

Tiếp theo chúng ta có thể sử dụng từ khoá this trong JavaScript để tham chiếu tới phần tử trong vòng lặp hiện tại.

//...
   var text = $(this).text();
//...
Sử dụng $(this) thay vì this để giúp chúng ta tận dụng được những phương thức của đối tượng jQuery

Vòng Lặp Ẩn

jQuery cho phép bạn sử dụng trực tiếp phương thức trên một danh sách các đối tượng jQuery mà không cần thông qua vòng lặp each(). Ví dụ chúng ta có thể sử dụng trực tiếp phương thức css() trên một danh sách các phần tử $("p") trả về như sau:

$("p").css("color", "red");

Chạy

Thay vì phải sử dụng vòng lặp each() như dưới đây:

$("p").each(function () {
    $(this).css("color", "red");
});

Chạy

Khi bạn gọi trực tiếp phương thức css() trên danh sách các đối tượng jQuery trả về thì thư viện jQuery sẽ tự động thực hiện một vòng lặp each() (giống như trong ví dụ ở trên) giúp bạn.

jQuery Cơ Bản


Thảo Luận


Chưa có câu hỏi nào cho bài hướng dẫn này
Đặt câu hỏi

Mời Bạn Bè

Gửi email mời bạn bè tham gia khóa học

Viết Cùng Tác Giả

Bạn biết về chủ đề này và muốn tham gia viết cùng tác giả?