jQuery lặp qua - phương pháp nextAll()

Hướng dẫn lặp qua jQuery

Mô hình

Tìm kiếm tất cả các tên lớp sau div đầu tiên và thêm tên lớp cho chúng:

$("div:first").nextAll().addClass("after");

Thử ngay

Định nghĩa và cách sử dụng

nextAll() nhận được tất cả các phần tử anh em tiếp theo của mỗi phần tử trong bộ sưu tập khớp phần tử, việc lọc bằng biểu thức chọn lọc là tùy chọn.

Cú pháp

.nextAll(selector)
Tham số Mô tả
selector Giá trị chuỗi, chứa biểu thức chọn lọc để khớp phần tử.

Giải thích chi tiết

Nếu được cung cấp một đối tượng jQuery biểu thị bộ sưu tập phần tử DOM, phương pháp .nextAll() cho phép chúng ta tìm kiếm phần tử anh em tiếp theo trong cây DOM, và tạo ra đối tượng jQuery mới bằng cách sử dụng phần tử khớp.

Phương pháp này chấp nhận biểu thức chọn lọc tùy chọn, loại tương tự như tôi truyền vào hàm $(). Nếu áp dụng biểu thức chọn lọc, chúng sẽ được lọc bằng cách kiểm tra xem phần tử có khớp hay không.

Hãy suy nghĩ về trang web này với danh sách đơn giản:

<ul>
   <li>đ項 mục 1</li>
   <li>đ項 mục 2</li>
   <li class="third-item">đ項 mục 3</li>
   <li>đ項 mục 4</li>
   <li>đ項 mục 5</li>
</ul>

Nếu chúng ta bắt đầu từ dự án ba, chúng ta có thể tìm thấy phần tử xuất hiện sau đó:

$('li.third-item').nextAll().css('background-color', 'red');

Thử ngay

Kết quả của cuộc gọi này là, dự án 4 và 5 được thiết lập với nền màu đỏ. Do chúng ta không áp dụng biểu thức chọn lọc, phần tử này rõ ràng được bao gồm làm một phần của đối tượng. Nếu chúng ta đã áp dụng biểu thức chọn lọc, trước khi bao gồm nó sẽ kiểm tra xem có khớp hay không.

Hướng dẫn lặp qua jQuery