Làm việc với phương thức each trong jQuery

Khi chúng ta có một nhóm các phần tử thu được bằng jQuery, chúng ta chỉ có thể thay đổi chúng cho tất cả các phần tử cùng một lúc.

Ví dụ, nếu chúng ta muốn thay đổi văn bản của tất cả các đoạn văn được tìm thấy - chúng ta sẽ không thể làm cho chúng khác nhau.

Trong trường hợp này, phương thức đặc biệt each sẽ giúp chúng ta, phương thức này cho phép áp dụng một hàm nào đó cho tất cả các phần tử của một tập hợp jQuery. Đồng thời, bên trong hàm này chúng ta có thể phân biệt các phần tử và xử lý khác nhau với từng phần tử trong số chúng.

Về bản chất each là một vòng lặp, với sự trợ giúp của nó có thể lặp qua tất cả các phần tử được tìm thấy. Tham chiếu đến phần tử mà vòng lặp đang thực hiện sẽ nằm trong this.

Chúng ta có thể chỉ đơn giản sử dụng this này trong JavaScript thuần như chúng ta đã làm trước đây, ví dụ, như thế này - this.innerHTML - và hiển thị nội dung bên trong của các phần tử của chúng ta. Nhưng tốt hơn là bọc this trong ký hiệu dollar jQuery như thế này - $(this) - trong trường hợp này chúng ta có thể áp dụng cho nó tất cả các phương thức và chuỗi jQuery.

Hãy xem xét mã HTML sau:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

Trong ví dụ này, chúng ta phải lấy tất cả các phần tử có lớp www và hiển thị trên màn hình nội dung của chúng. Cách thực hiện: với sự trợ giúp của $('.www') chúng ta lấy các phần tử cần thiết, sau đó với sự trợ giúp của each(test) chúng ta áp dụng hàm test cho mỗi phần tử thu được. Đầu tiên nó sẽ được áp dụng cho đoạn văn đầu tiên, sau đó đến đoạn văn thứ hai, thứ ba và cứ thế.

Bên trong hàm, this sẽ trỏ đến phần tử mà hàm test đang được áp dụng - đầu tiên sẽ là phần tử đầu tiên, sau đó là phần tử thứ hai, và cứ thế. Với cấu trúc $(this) như vậy, thay vì this thông thường từ JavaScript, chúng ta sẽ nhận được phần tử jQuery và áp dụng phương thức html cho nó, phương thức này sẽ lấy văn bản của phần tử của chúng ta. Sau đó, nó sẽ được hiển thị trên màn hình:

/*
	Chúng ta viết tên hàm test không có dấu nháy và (),
	vì chúng ta cần mã của nó, chứ không phải kết quả:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

Để giải quyết nhiệm vụ này, cũng có thể sử dụng các hàm ẩn danh - điều này thường được làm hơn:

$('.www').each(function() {
	alert($(this).html());
});

Chúng ta cũng có thể truyền cho phương thức each một hàm callback với các tham số.

Hãy trong ví dụ tiếp theo thêm vào cuối tất cả các li trên trang số thứ tự của chúng. Bây giờ vào hàm ẩn danh của chúng ta, chúng ta sẽ truyền số thứ tự của phần tử và chính phần tử đó:

$('li').each(function (index, elem) {
	$(elem).append(index);
});

Và bây giờ thay vì elem, hãy sử dụng this:

$('li').each(function (index) {
	$(this).append(index);
});

Hãy thay đổi nội dung của tất cả các li thành số thứ tự của chúng.