jQuery duyệt - phương pháp prevUntil()
Mô hình
Tìm tất cả các phần tử p có tên lớp là "selected" của tất cả các phần tử đồng cấp:
$("p").siblings(".selected")
Định nghĩa và cách sử dụng
siblings() nhận được các phần tử đồng cấp của mỗi phần tử trong bộ sưu tập khớp, việc lọc thông qua biểu thức chọn lọc là tùy chọn.
Cú pháp
.siblings(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 .siblings() cho phép chúng ta tìm kiếm các phần tử đồng cấp của các phần tử đó trong cây DOM và tạo một đối tượng jQuery mới từ các 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, giống như loại tham số chúng ta truyền vào hàm $(). Nếu áp dụng biểu thức chọn lọc, sẽ lọc các phần tử thông qua việc kiểm tra xem phần tử có khớp với biểu thức chọn lọc hay không.
Hãy suy nghĩ về trang này với danh sách嵌套 cơ bản:
<ul> <li>đối tượng danh sách 1</li> <li>đối tượng danh sách 2</li> <li class="third-item">đối tượng danh sách 3</li> <li>đối tượng danh sách 4</li> <li>đối tượng danh sách 5</li> </ul>
Nếu chúng ta bắt đầu từ mục thứ ba, chúng ta có thể tìm thấy các phần tử đồng cấp của phần tử đó:
$('li.third-item');.siblings();.css('background-color', 'red');
Kết quả được gọi ở đây là đặt màu nền của các mục 1, 2, 4 và 5 thành đỏ. Đặt màu nền thành đỏ. Do chúng ta chưa áp dụng biểu thức chọn lọc, tất cả các đối tượng đồng cấp tự nhiên trở thành một phần của đối tượng. Nếu đã áp dụng biểu thức chọn lọc, chỉ bao gồm các mục phù hợp trong bốn danh sách.
Đối tượng nguyên bản không bao gồm trong các đối tượng đồng cấp, hãy nhớ điều quan trọng khi chúng ta định tìm tất cả các phần tử trên một cấp độ cụ thể của cây DOM.
