Phương thức find() của jQuery nghe có vẻ quen thuộc, nhưng đừng nhầm lẫn với phương thức find() của JavaScript! Cả hai đều "tìm kiếm" thứ gì đó, nhưng những gì chúng trả về có thể khác biệt hoàn toàn. Trong JavaScript, phương thức find() chỉ có thể được gọi trên một mảng.
Nó nhận một hàm callback, là một hàm được truyền cho một phương thức làm đối số để gọi sau này. Nó tìm và trả về phần tử đầu tiên thỏa mãn yêu cầu được nêu trong hàm callback.
Phương thức find() của jQuery thì khác biệt. Giống như tất cả các phương thức jQuery, nó được gọi trên một bộ chọn. Nó tìm kiếm bên trong bộ chọn đó và chỉ thao tác trên các phần tử con của bộ chọn đó. Mức độ thao tác cao này rất hữu ích nếu bạn muốn thay đổi một số phần tử mà không làm ảnh hưởng đến các phần tử khác nằm trong cùng phần tử cha.
Sử dụng jQuery find()
Chúng ta đã biết jQuery find() được dùng để chọn tất cả các phần tử con của một bộ chọn cho trước. Hãy xem mã ví dụ để hiểu cách sử dụng jQuery find().
Hãy bắt đầu đơn giản và thêm độ phức tạp ở các phần sau. Chúng ta có thể thao tác một phần tử sau khi trang tải để minh họa cách find() hoạt động. Thử thay đổi màu của một số từ trong ngữ cảnh của một đoạn văn khi trang tải. Chúng ta bắt đầu như sau:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="main"> <h2> Ví dụ phương thức jQuery find() </h2> <p> Đây là một đoạn văn ví dụ. </p> <p>Chúng ta sẽ thay đổi màu của từ <span>xanh</span> thành màu xanh.</p> <div class="green">Chúng ta sẽ thay đổi từ <span>xanh lá</span> thành màu xanh lá.</div> <p> Mọi từ khác sẽ giữ nguyên. </p> </div>
Nhìn vào mã này, bạn sẽ thấy bên trong phần tử <p> có một vài phần tử <span>. Một trong các phần tử <span> là con của phần tử <p>. Phần tử <span> kia là con của <div> với class "green". Như đoạn văn nói, chúng ta sẽ chỉ thay đổi màu của các từ được bao bọc bởi <span>. Đảm bảo HTML hiển thị trước khi làm điều đó:
HTML đang hiển thị. Chúng ta bây giờ sẽ thay đổi màu văn bản để minh họa find() hoạt động. Đây là bước đầu tuyệt vời cho người mới vì chúng ta chỉ cần thay đổi một thuộc tính CSS để đạt được điều này. Khi truyền phần tử <p> làm bộ chọn cho find(), chúng ta có thể sử dụng phương thức css() của jQuery để hiển thị thay đổi màu:
<script>
$(document).ready(() => {
$('p').find('span').css('color', 'blue');
$('div.green').find('span').css('color', 'green');
})
</script>
Trong lần sử dụng find() đầu tiên, chúng ta chọn tất cả các phần tử <p>. Chúng ta dùng find() để định vị bất kỳ phần tử <span> nào là con của <p>. Trong ví dụ này, chỉ có từ "xanh". Sau đó dùng phương thức css() để thay đổi màu thành xanh.
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.
Chuyển sang lần sử dụng find() thứ hai. Lần này chúng ta chọn <div> với class "green" và gọi find() trên nó. Phương thức đang định vị một phần tử <span> khác là con của <div>.
Lại lần nữa, chỉ có từ "xanh lá". Giống như dòng đầu tiên, chúng ta dùng phương thức css() để thay đổi màu thành xanh lá.
Hãy chạy và xem kết quả!
Chú ý rằng cả hai từ "xanh" và "xanh lá" đều được bao bọc trong phần tử span không có class hoặc id. Chúng ta vẫn có thể cô lập các từ đó và thay đổi màu của chúng. Như bạn có thể đoán, đó là vì các phần tử cha của <span> khác nhau.
Phần tử <p> là cha của <span> chứa từ "xanh". Phần tử <div class='green'> là cha của <span> chứa từ "xanh lá".
Điều này xảy ra vì find() định vị các phần tử con của các phần tử được dùng làm bộ chọn. Hãy thêm độ phức tạp và xem ví dụ về danh sách công việc.
jQuery find() trong Danh sách
Trong ví dụ này, chúng ta có một danh sách việc cần làm. Chúng ta có việc hôm nay, nhưng cũng cần mua đồ ở cửa hàng để làm chúng. Khi đã mua các mặt hàng này, chúng ta có thể đánh dấu chúng khỏi danh sách và tiếp tục ngày! Đây là danh sách của chúng ta:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2> Ví dụ danh sách việc cần làm </h2>
<ul>
<li class="store">Đi đến cửa hàng
<ul>
<li>Túi rác</li>
<li>Nước rửa chén</li>
</ul>
</li>
<li>Đưa rác ra</li>
<li>Rửa chén</li>
</ul>
</div>
Ở đây chúng ta có danh sách. Chúng ta có các phần tử <li> "Đi đến cửa hàng", "Đưa rác ra", và "Rửa chén", là con của phần tử <ul>, là con của <div> với id "main". Bên trong mục "Đi đến cửa hàng", chúng ta có những thứ cần mua. Chúng ta cần túi rác và nước rửa chén để hoàn thành việc hôm nay. Chúng ta đặt chúng như một danh sách lồng nhau làm con của <li> với class "store".
Bây giờ chúng ta có thể đánh dấu các mặt hàng này khỏi danh sách sau khi mua:
<script>
$(document).ready(() => {
$('li.store').find('li').css('text-decoration', 'line-through')
})
</script>
Chúng ta có thể gạch ngang chỉ các mặt hàng đó bằng cách chọn <li> với class "store" và dùng find() để định vị các phần tử <li> con. Lại một lần, chúng ta dùng phương thức css() của jQuery để áp dụng giá trị "line-through" cho thuộc tính "text-decoration". Việc này sẽ hiển thị các mục được chọn với một đường gạch ngang:
Kết luận
Phương thức find() của jQuery định vị tất cả các phần tử con của bộ chọn được truyền vào. Phương thức find() sẽ chỉ thao tác trên các phần tử con này, không phải trên chính phần tử cha.
Khả năng phân biệt các phần tử con nào để chọn cho phép chúng ta vừa chung chung thay đổi toàn bộ phần của trang, vừa cụ thể chỉ thay đổi một số phần tử nhất định. Chính sự linh hoạt này làm cho find() trở nên hữu ích nhất.
Tìm hiểu thêm về cách học jQuery tại đây.