Một video khái niệm khác! Đây là “chỉ một trong những điều đó” bạn cần hiểu trong jQuery. Nó thực sự có một chút độc đáo đối với jQuery, trong đó các thư viện JavaScript phổ biến khác trước đây đã không làm theo cách này.
Chúng tôi đã đề cập đến các bộ chọn khá nhiều. Ví dụ, bạn đã biết rằng $("p")sẽ chọn tất cả các đoạn văn trên một trang. Không chỉ cái đầu tiên hay cái ngẫu nhiên nào đó, tất cả chúng. Bạn có thể dễ dàng tưởng tượng có thể có nhiều trong số này trên một trang. Bây giờ hãy tưởng tượng điều gì sẽ xảy ra khi bạn làm:
$("p").hide();Tất cả chúng đều bị ẩn đi đúng không? Đúng. Không phải cái đầu tiên hay cái ngẫu nhiên nào đó, tất cả đều như vậy. Sự lặp lại ngầm đó . Đằng sau hậu trường, jQuery tự động lặp qua toàn bộ tập hợp các phần tử mà nó tìm thấy và chạy phương pháp bạn đã chọn trên chúng. Theo nghĩa đen, chúng ta không cần phải tự viết một vòng lặp để làm điều này. Có vẻ khá rõ ràng nếu bạn giới thiệu JavaScript là jQuery, nhưng nhiều thư viện trong quá khứ đã yêu cầu bạn tự lặp qua các bộ sưu tập các phần tử.
Nếu bạn muốn, bạn vẫn có thể tự viết vòng lặp. Điều đó có thể trông giống như thế này, sử dụng các phương thức lặp jQuery:
$("p").each(function() ( $(this).hide(); ));Đó chỉ là về cùng một điều. Không nhất thiết, nhưng bạn có thể. Đó là sự lặp lại rõ ràng .
Đôi khi bạn cần thực hiện lặp lại rõ ràng. Về cơ bản, nếu chúng ta cần truy cập giá trị của thisvà làm điều gì đó đặc biệt với nó, chúng ta sẽ cần cấu trúc vòng lặp của riêng mình để làm việc.
Ví dụ trong video màn hình này là đếm các ký tự trong các mục danh sách và nối nó vào cuối chuỗi. Chúng tôi sẽ cần lặp lại rõ ràng cho điều đó.
Xem Bút 4b53b9f55662d0d26339e18277500eee của Chris Coyier (@chriscoyier) trên CodePen
Chúng tôi đã sử dụng phương thức each () của jQuery ở đây, phương thức này hoàn hảo cho những gì chúng tôi cần. Một chút hữu ích mà nó mang lại cho chúng ta là cung cấp cho chúng ta một bộ đếm không lập chỉ mục mỗi lần lặp mà chúng ta có thể truy cập nếu cần.
$(".there-are-three-of-me").each(function(i) ( console.log(i); )); // 0 // 1 // 2