Bộ chọn jQuery :nth-child() Selector có cú pháp như thế nào và dùng để chọn những phần tử gì? Cùng đọc bài viết sau đây để tìm hiểu rõ hơn về bộ chọn này cùng với những ví dụ cụ thể
Cú pháp, Định nghĩa và cách sử dụng jQuery :nth-child() Selector
Syntax
Bộ chọn jQuery :nth-child() Selector có cú pháp
$(":nth-child(n|even|odd|formula)")
| Tham số | Mô tả |
|---|---|
| n | Chọn phần tử có chỉ số thứ tự là n. Phần tử đầ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-child(3n + 2) chọn mỗi đoạn thứ 3, bắt đầu từ phần tử con thứ 2
|
:nth-child(n) Selector dùng để chọn tất cả phần tử là con thứ n, bất kể loại hay thuộc tính nào của cha mẹ chúng.Mẹo:
Để chọn những phần tử con theo thứ tự của một loại cụ thể, chúng ta sử dụng bộ chọn
:nth-of-type()
ví dụ jQuery :nth-child() Selector
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-child(2)")
Ví dụ
Sử dụng công thức (an + b) để chọn những phần tử con khác nhau.Chọn những phần tử p tính từ trên xuống theo thứ tự 2,5,8... từ công thức (3n+2)
$("p:nth-child(3n+2)")
Ví dụ
Sử dụng even hoặc odd để chọn những phần tử con khác nhau.
$("p:nth-child(even)")
$("p:nth-child(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
