jQuery lặp lại - phương pháp next()

Hướng dẫn tra cứu lặp jQuery

Mô hình

Tìm phần tử anh em tiếp theo của mỗi đoạn văn, chỉ chọn đoạn văn có tên lớp là "selected":

$("p").next(".selected").css("màu nền", "vàng");

Thử ngay lập tức

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

next() lấy phần tử anh em tiếp theo của mỗi phần tử trong bộ sưu tập khớp元素. Nếu cung cấp biểu thức chọn lọc, sẽ lấy phần tử anh em tiếp theo khớp với biểu thức chọn lọc.

Cú pháp

.next(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 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 .next() cho phép chúng ta tìm kiếm phần tử anh em tiếp theo của phần tử tiếp theo trong cây DOM, và tạo đối tượng jQuery mới từ 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 giống như tôi truyền vào hàm $(). Nếu phần tử anh em tiếp theo khớp với biểu thức chọn lọc, nó sẽ ở lại trong đối tượng jQuery mới được tạo; ngược lại, sẽ loại bỏ nó.

Hãy suy nghĩ về trang web này có 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, thì có thể tìm thấy phần tử xuất hiện sau đó:

$('li.third-item').next().css('màu nền', 'đỏ');

Thử ngay lập tức

Kết quả của cuộc gọi này là, dự án 4 được thiết lập màu nền đỏ. 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 tra cứu lặp jQuery