Bộ chọn :nth-of-type() Selector dùng để chọn những phần tử con có cùng loại, thuộc tính. Bộ jQuery Selector này có cú pháp và cách sử dụng như thế nào. Cùng tìm hiểu qua những ví dụ cụ thể trong bài học này nhé
Cú pháp, Định nghĩa và cách sử dụng jQuery :nth-of-type() Selector
Syntax
Bộ chọn jQuery :nth-of-type() Selector có cú pháp
$(":nth-of-type(n|even|odd|formula)")
| Tham số | Mô tả |
|---|---|
| n | Chọn phần tử có chỉ số thứ tự là n. Trong đó n phải là số và phần tử con đầu tiên có n=1 |
| even | Chọn những phần tử con chẵn |
| odd | Chọn những phần tử con lẻ |
| formula | Chọn các phần tử con theo công thức (an + b).
Ví dụ: p:nth-of-type(3n + 2) chọn mỗi đoạn thứ 3, bắt đầu từ phần tử con thứ 2 |
:nth-of-type(n) Selector dùng để chọn tất cả phần tử là con thứ n của cha mẹ chúng tính từ trên xuống dưới.Mẹo:
Để chọn tất cả phần tử là con thứ n của cha mẹ chúng tính từ phần tử trên xuống dưới, không cần phân biệt loại, hay thuộc tính nào của mọi phần tử, chúng ta sử dụng bộ chọn
:nth-child(n)
ví dụ jQuery :nth-last-child() Selector
Ví dụ
Chọn những phần tử<p> là phần tử con thứ 3 của cha mẹ chúng tính từ dưới lên (từ phần tử con cuối cùng trở ngược lại)
$("p:nth-of-type(3)")
Ví dụ
Chọn những phần tử<p> là phần tử con thứ 2 của tất cả những phần tử <div>
$("div p:nth-of-type(2)")
Ví dụ
Sử dụng công thức (an + b) để chọn những phần tử con cùng thuộc tính thỏa mãn theo yêu cầu.Chọn những phần từ con là p có thứ tụ 2, 5, 8 phù hợp theo công thức (3n+2)
$("p:nth-of-type(3n+2)")
Ví dụ
Sử dụng even hoặc odd để chọn những phần tử con khác nhau, được tính từ phần tử cuối cùng trở lên.
$("p:nth-of-type(even)")
$("p:nth-of-type(odd)")
Ví dụ
Sự khác nhau giữa:nth-child(), :nth-last-child(), :nth-of-type() và :nth-of-last-type()
$("p:nth-child(2)")
$("p:nth-last-child(2)")
$("p:nth-of-type(2)")
$("p:nth-last-of-type(2)")
Xem thêm bài viết Tất cả bộ chọn jQuery Selectors tại đây
