jQuery duyệt - phương thức find()
Mô hình
Tìm kiếm tất cả các phần tử con span trong các đoạn văn và đặt màu sắc của chúng thành đỏ:
$("p").find("span").css('color','red');
Định nghĩa và cách sử dụng
Phương thức find() lấy các phần tử con của mỗi phần tử trong tập hợp phần tử hiện tại, lọc chúng bằng cách sử dụng biểu thức chọn lọc, đối tượng jQuery hoặc phần tử.
Cú pháp
.find(selector)
| Tham số | Mô tả |
|---|---|
| selector | Giá trị chuỗi, chứa biểu thức chọn lọc để khớp với tập hợp phần tử hiện tại. |
Giải thích chi tiết
Nếu cho một đối tượng jQuery đại diện cho tập hợp các phần tử DOM, phương thức .find() cho phép chúng ta tìm kiếm các phần tử con của chúng trong cây DOM và tạo ra một đối tượng jQuery mới bằng các phần tử khớp. .find() tương tự như phương thức .children(), nhưng khác biệt là后者 chỉ di chuyển theo cây DOM theo một cấp.
Tính năng rõ ràng đầu tiên của phương thức .find() là, nó chấp nhận biểu thức chọn lọc tương tự như biểu thức chúng ta truyền vào hàm $(). Nó sẽ lọc các phần tử bằng cách kiểm tra xem chúng có khớp với biểu thức này hay không.
Hãy suy nghĩ về danh sách nhúng đơn giản này:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
Chúng ta sẽ bắt đầu từ danh sách II để tìm các mục danh sách trong đó:
$('li.item-ii').find('li').css('background-color', 'red');
Kết quả của cuộc điều tra này là, các dự án A, B, 1, 2, 3 và C đều được thiết lập màu nền đỏ. Mặc dù dự án II khớp với biểu thức chọn, nó cũng không được bao gồm trong kết quả; chỉ so sánh với các phần tử后代.
Khác với các phương thức duyệt cây khác, biểu thức chọn là một tham số bắt buộc đối với .find(). Nếu chúng ta cần lấy lại tất cả các phần tử后代, có thể truyền vào biểu thức chọn '*'.
Chọn器 context được thực hiện bởi phương thức .find(); vì vậy, $('li.item-ii').find('li') tương đương với $('li', 'li.item-ii').
Đối với jQuery 1.6, chúng ta còn có thể sử dụng bộ jQuery hoặc phần tử được cung cấp để lọc. Đối với danh sách嵌套 trên, chúng ta viết như sau:
var $allListElements = $('li');
Sau đó truyền đối tượng jQuery này cho phương thức find:
$('li.item-ii').find( $allListElements );
Mã trên sẽ trả về một bộ jQuery chứa các phần tử danh sách thuộc后代 của danh sách II.
Tương tự, bạn cũng có thể truyền vào một phần tử:
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');
Kết quả của lần gọi này là dự án 1 được thiết lập màu nền đỏ.
