JS - Child Filter Selector
by My Love
19/04/2019, 4:26 PM | 19/04/2019, 4:29 PM | 753 | 041
Nhóm
Child Filter Selector giúp tìm kiếm lấy về các thẻ là con của một thẻ cha nào đó, bảng dưới đây mô tả một số Child Filter thông dụng trong jQuery.
1. Danh sách Child Filter trong jQuery
| Cú pháp |
Mô tả |
| $("selector:first-child") |
Lấy thẻ con đầu tiên của thẻ cha |
| $("selector:first-of-type") |
Lấy các thẻ HTML đầu tiên trong danh sách selector có cùng Tag Name.
Ví dụ $(".My-Class:first-of-type") lấy các thẻ đầu tiên trong danh sách các thẻ có class=My-Class và có cùng Tag Name.
Kết quả trả về của $(".My-Class") ví dụ gồm nhiều thẻ <p> và nhiều thẻ <span> thì nó sẽ chỉ lấy 1 thẻ <p> đầu tiên và 1 thẻ <span> đầu tiên. |
| $("selector:last-child") |
Lấy thẻ con cuối cùng của thẻ cha |
| $("selector:last-of-type") |
Lấy các thẻ HTML cuối cùng trong danh sách selector có cùng Tag Name.
Ví dụ $(".My-Class:last-of-type") lấy các thẻ cuối cùng trong danh sách các thẻ có class=My-Class và có cùng Tag Name.
Kết quả trả về của $(".My-Class") ví dụ gồm nhiều thẻ <p> và nhiều thẻ <span> thì nó sẽ chỉ lấy 1 thẻ <p> cuối cùng và 1 thẻ <span> cuối cùng. |
| $("selector:nth-child(n)") |
Lấy thẻ con thứ n |
| $("selector:nth-last-child( n )") |
Lấy thẻ con thứ n tính từ dưới lên |
| $("selector:nth-last-of-type(n)") |
Lấy thẻ con thứ n trong danh sách các thẻ có cùng Tag Name với nhau tính từ dưới lên.
Ví dụ $(".My-Class::nth-last-of-type(2)") lấy các thứ 2 từ dưới lên trong danh sách các thẻ có class=My-Class và có cùng Tag Name.
Kết quả trả về của $(".My-Class") ví dụ gồm nhiều thẻ <p> và nhiều thẻ <span> thì nó sẽ chỉ lấy 1 thẻ <p> thứ 2 từ dưới lên và 1 thẻ <span> thứ 2 từ dưới lên. |
| $("selector:nth-of-type( n )") |
Tương tự như :nth-last-of-type nhưng tính từ trên xuống |
| $("selector:only-child") |
Lấy thẻ là con duy nhất của thẻ cha |
| $("selector:only-of-type") |
Lấy các thẻ là con duy nhất của thẻ cha và có cùng tag Name.
Ví dụ $(".My-Class:only-of-type") lấy các thẻ là con duy nhất trong danh sách các thẻ có class=My-Class và có cùng Tag Name.
Kết quả trả về của $(".My-Class") ví dụ gồm 1 thẻ <p> và 1 thẻ <span> thì nó sẽ chỉ lấy 2 thẻ đó. |
Đối với các Selector có giá trị truyền vào thì ngoài việc truyền vào số bạn có thể truyền các giá trị sau :
-
odd : các số chẵn
-
even : các số lẻ
-
2n + 1 : là các số 1, 3, 5 , 7 , 9 ...
-
3n + 1 : là các số 1, 4, 7, 10 .....
( bước nhảy n bắt đầu từ 0 sau đó tăng dần )
2. Các ví dụ
:first-child
Thêm class cho thẻ <p> mà là con đầu tiên của thẻ cha <div>
$('div p:first-child').addClass('active');
:first-of-type
Thêm class vào thẻ <p> đầu tiên có thẻ cha là <div> , có tag Name là <p> và cùng cấp với nhau. Cái này hơi khác với
:first-child bạn xem kết quả hai ví dụ để thấy rõ
$('div p:first-of-type').addClass('active');
:last-child
Thêm class cho thẻ <p> mà là con cuối cùng của thẻ cha <div>
$('div p:last-child').addClass('active');
:last-of-type
Thêm class vào thẻ <p> cuối cùng có thẻ cha là <div> , có tag Name là <p> và cùng cấp với nhau. Cái này hơi khác với
:last-child bạn xem kết quả hai ví dụ để thấy rõ
$('div p:last-of-type').addClass('active');
:nth-child
Thêm class cho thẻ <p> mà là con đứng vị trí thứ 2 trong thẻ <div>
$('div p:nth-child(2)').addClass('active');
:nth-last-child
Thêm class cho thẻ <p> mà là con thứ 2 của thẻ <div> tính từ dưới lên
$('div p:nth-last-child(2)').addClass('active');
:nth-last-of-type
Thêm class vào thẻ <p> là thẻ con thứ 2 trong danh sách các thẻ có tag Name là <p> , cùng cấp với nhau, nằm trong thẻ <div> tính từ dưới lên. Cái này hơi khác với
:nth-last-child bạn xem kết quả hai ví dụ để thấy rõ
$('div p:nth-last-of-type(2)').addClass('active');
:nth-of-type
Thêm class vào thẻ <p> là thẻ con thứ 2 trong danh sách các thẻ có tag Name là <p> , cùng cấp với nhau, nằm trong thẻ <div> tính từ trên xuống. Cái này hơi khác với
:nth-child bạn xem kết quả hai ví dụ để thấy rõ
$('div p:nth-of-type(2)').addClass('active');
:only-child
Thêm class vào thẻ <span> là con duy nhất của thẻ cha <div>
$('div span:only-child').addClass('active');
:only-of-type
Thêm class vào thẻ <span> nếu thẻ này là con duy nhất mà có tag Name là <span> có thẻ cha là <div> . Cái này hơi khác với
:only-child bạn xem kết quả hai ví dụ để thấy rõ
$('div span:only-of-type').addClass('active');