Cách dùng :parent Selector trong jQuery
Parent Selector sẽ lựa chọn tất cả các phần tử có ít nhất một phần tử con trong nó. Lưu ý rằng các đoạn text cũng có thể hiểu là một phần tử con.
![banquyen png](https://freetuts.net/public/banquyen.png)
Parent selector có công dụng ngược với :empty
selector.
Một điều quan trọng cần lưu ý khi sử dụng cả :parent
và :empty
là các đoạn text cũng được xem như là một phần tử con.
W3C có chỉ ra rằng các phần tử <p>
có ít nhất một thẻ con, ngay cả khi nó chỉ là một đoạn văn bản. Mặt khác có một số thẻ luôn empty ví dụ như: <input>
, <br>
, <img>
...
Bài viết này được đăng tại [free tuts .net]
Chú ý: Bởi vì :parent
là một Jquery extension và không phải là một phần thiết lập của CSS, các truy vấn sử dụng :parent
sẽ không thể phát huy hiệu quả của phương thức querySelectorAll()
. Để đạt được hiệu quả cao nhất khi sử dụng, đầu tiên bạn nên sử dụng một selector được hỗ trợ bởi CSS, sau đó sử dụng .filter(":parent")
để lọc lại kết quả.
Cú pháp
jQuery( ":parent" )
Ví dụ
Tìm kiếm ô td có ít nhất một phần tử con(tính cả văn bản) và đổi màu cho chúng:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Học lập trình miễn phí tại freetuts.net</title> <script src="https://freetuts.net/cnd/js/jquery/jquery-3.2.1.min.js"></script> <style> td { width: 40px; height: 40px; background: black; } </style> </head> <body> <h1>Học lập trình miễn phí tại freetuts.net</h1> <table border="1"> <tr> <td><span>Span</span></td> <td></td> <td>Parent</td> </tr> <tr> <td></td> <td>Parent</td> <td></td> </tr> <tr> <td>Parent</td> <td></td> <td><span>Span</span></td> </tr> </table> <button onclick="myFunction()">Click vào đây để xem kết quả</button> <script> function myFunction(){ $( "td:parent" ).css( "background", "yellow"); } </script> </body> </html>
Kết quả:
Tham khảo: jquery.com