jQuery each() là một cách ngắn gọn để lặp qua các phần tử DOM. Each() phương thức được thiết kế để được gọi trên đối tượng jQuery đích. Đối tượng jQuery là một đối tượng có chứa một hoặc nhiều phần tử DOM và có quyền truy cập vào các phương thức jQuery. Không chỉ là each() ít bị lỗi hơn, nó đơn giản hóa việc thao tác với nhiều phần tử DOM.
jQuery each() yêu cầu một hàm gọi lại - một hàm được truyền cho một hàm khác sẽ được thực thi sau đó. Bên trong của hàm gọi lại là quyền truy cập vào số chỉ mục của phần tử và chính phần tử đó. Đánh giá toàn diện hơn về các chức năng gọi lại có thể được tìm thấy tại đây.
Ứng dụng của each() đơn giản như bất kỳ vòng lặp JavaScript nào, nhưng có một số chỗ có thể gây nhầm lẫn. Chúng tôi sẽ làm rõ những điểm này cũng như xem xét cú pháp. Ở cuối hướng dẫn này sẽ là các ví dụ mã từng bước để xem các cách khác nhau để áp dụng jQuery each() .
jQuery each () là gì?
jQuery mỗi là một phương thức lặp cho thư viện jQuery. Nó hoạt động giống như một vòng lặp JavaScript bằng cách lặp lại các phần tử DOM. jQuery each() yêu cầu một hàm gọi lại và bên trong hàm gọi lại là nơi các phần tử DOM có thể được thao tác.
Khi ở bên trong nội dung của hàm gọi lại, các câu lệnh điều kiện có thể được sử dụng để thay đổi một số phần tử đã chọn. Câu lệnh điều kiện là câu lệnh if… then trong JavaScript. Điều này 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ử được thay đổi.
Cú pháp jQuery each ()
Mỗi jQuery có thể được gọi theo hai cách. Đầu tiên, dưới dạng một phương thức được gọi trên một phần tử đã chọn. Hàm gọi lại chấp nhận tối đa hai đối số tùy chọn:chỉ mục và giá trị. Chỉ mục là số chỉ mục của phần tử hiện tại. Nếu phần tử hiện tại là phần tử đầu tiên trong danh sách, số chỉ mục sẽ trả về 0.
Đối số giá trị đề cập đến phần tử hiện tại. Điều quan trọng cần lưu ý là để xâu chuỗi một phương thức thành giá trị thì cần phải bao bọc giá trị trong bộ chọn jQuery. Hãy đặt tất cả điều này vào một số mã trừu tượng để chúng ta có thể chia nhỏ cú pháp.
$('div').each((index, value) => {
console.log(`${index}: ${$(value).text()}`)
}) Ở đây, chúng tôi đang chọn từng
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Hãy nhớ rằng [đối tượng Đối tượng] là một biểu diễn chuỗi của một đối tượng. Điều này có nghĩa là chúng ta cần gọi một phương thức để trích xuất giá trị chính xác mà chúng ta muốn. Trong trường hợp trên, chúng tôi đang sử dụng text() phương thức để tiết lộ thuộc tính văn bản của đối tượng. Đọc thêm về [object Object] để biết chính xác những gì đang được trả lại.
Ví dụ trên sẽ ghi số chỉ mục theo sau là thuộc tính văn bản cho mỗi
$('div').each(function() {
alert($(this).text())
}) Viết nó như thế này cũng ghi nhật ký văn bản của phần tử
Mặc dù các hàm mũi tên là một giải pháp thay thế nhỏ gọn cho việc viết một hàm, nhưng nó không ràng buộc với từ khóa this. Nói cách khác, đối tượng được trả về bằng cách sử dụng hàm này trong một hàm mũi tên không phải là đối tượng được trả về bởi đối tượng này khi được viết trong ký hiệu hàm.
Hướng dẫn này bao gồm các thông tin chi tiết của các chức năng mũi tên.
jQuery each () Ví dụ
Hãy mở rộng các ví dụ cú pháp ở trên và thêm một số thuộc tính. Chúng ta bắt đầu với việc kết xuất HTML cơ bản về danh sách các màu thuộc các lớp 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>
Điều này hiển thị từng phần tử văn bản trong DOM. Đầu tiên, hãy bắt đầu bằng cách ghi lại văn bản trong bảng điều khiển bằng cách sử dụng cả hàm mũi tên và hàm truyền thống.
$('.colorSelect').each((index, value) => {
console.log($(value).text())
}) Bằng cách chỉ chọn các
text() phương pháp. Làm như vậy chỉ trả về văn bản của các phần tử
Hãy trả lại cùng một kết quả, nhưng bằng cách sử dụng từ khóa this.
$('.colorSelect').each(function() {
console.log($(this).text())
})
Chúng ta có thể sử dụng một hàm ẩn danh - một hàm không có tên, làm hàm gọi lại. Một lần nữa, nó trả về văn bản Đỏ, Tím và Xanh lam. Điều đáng nói là mặc dù các hàm mũi tên có một số chức năng trong jQuery, nhưng cách tốt nhất là sử dụng ký hiệu hàm truyền thống cho các lệnh gọi lại jQuery.
Bây giờ chúng ta biết cách lặp lại một tập hợp các phần tử. Bây giờ, hãy vui chơi và thay đổi màu sắc!
<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> Vẫn với trang danh sách màu, bây giờ chúng ta đã thêm một số lớp vào phần tử