:nth-child() Selector trong jquery
:nth-child() Selector sẽ chọn tất cả các phần tử con thứ n nào đó trong các phần tử cha với n là số được cung cấp như một tham số khi gọi selector. Không giống như các index-related selectors (:eq(), :lt(), :gt(), :even, :odd), do sự thực thi :nth-child() Selector bắt nguồn từ CSS ...
:nth-child() Selector sẽ chọn tất cả các phần tử con thứ n nào đó trong các phần tử cha với n là số được cung cấp như một tham số khi gọi selector.
Không giống như các index-related selectors (:eq(), :lt(), :gt(), :even, :odd), do sự thực thi :nth-child() Selector bắt nguồn từ CSS nên giá trị của n sẽ bắt đầu từ 1 (các index-related selectors đầu từ 0).
Các bạn cần lưu ý để tránh bị nhầm lẫn giữa :nth-child(n) và :eq(n), mặc dù kết quả của chúng khác nhau khá nhiều. Điều đầu tiên mình đã đề cập ở trên, :nth-child(n) sẽ bắt đầu từ 1 còn :eq(n) sẽ bắt đầu từ phần tử 0. Thứ hai là cách hoạt động của chúng, trong khi :nth-child(n) sẽ chọn phần tử thứ n trong tất cả các phần tử con của selector đặt trước nó, thì :eq(n) sẽ chọn phần tử thứ n-1 trong các kết quả trả về của selector đặt trước nó. Các bạn nên xem ví dụ để hiểu rõ hơn.
Cú pháp
jQuery( ":nth-child(index)" )
Trong đó:
- index là chỉ số của phần tử muốn chọn bắt đầu từ 1, index cũng có thể là chuỗi odd, even hoặc một phép tính toán học(:nth-child(even), :nth-child(4n)).
Ví dụ
Tìm kiếm các thẻ li mô tả thời gian của khóa học(thẻ thứ 3 trong số các thẻ con của thẻ ul) và định dạng cho chúng:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Học lập trình miễn phí tại code24h.com</title> <script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script> </head> <body> <h1>Học lập trình miễn phí tại code24h.com</h1> <ul class="freetut"> <h3>Khóa học 1</h3> <li> Name: PHP</li> <li>Time: 48 Videos</li> <li>Author: Nguyễn Văn A</li> </ul> <ul class="freetut"> <h3>Khóa học 2</h3> <li> Name: HTML</li> <li>Time: 28 Videos</li> <li>Author: Nguyễn Văn B</li> </ul> <button onclick="myFunction()">Click vào đây để xem kết quả</button> <script> function myFunction(){ $( ".freetut li:nth-child(3)" ).css( "color", "red"); } </script> </body> </html>
Kết quả:
Ví dụ 2: Ta sẽ cùng so sánh kết quả khi sử dụng :nth-child(n) và :eq(n) để tìm ra sự khác biệt:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Học lập trình miễn phí tại code24h.com</title> <script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script> </head> <body> <h1>Học lập trình miễn phí tại code24h.com</h1> <ul id="nth-child"> <h3>Khóa học 1</h3> <li> Name: PHP</li> <li>Time: 48 Videos</li> <li>Author: Nguyễn Văn A</li> </ul> <ul id="eq"> <h3>Khóa học 2</h3> <li> Name: HTML</li> <li>Time: 28 Videos</li> <li>Author: Nguyễn Văn B</li> </ul> <button onclick="myFunction()">Click vào đây để xem kết quả</button> <script> function myFunction(){ $( "#nth-child li:nth-child(2)" ).css( "color", "red"); $( "#eq li:eq(2)" ).css( "color", "blue"); } </script> </body> </html>
Như các bạn có thể thấy, cùng một chỉ số n=2 nhưng hai selector cho ra kết quả hoàn toàn khác nhau, mình hi vọng các bạn sẽ không bao giờ nhầm lẫn giữa 2 selector này sau khi đọc xong bài viết này :D.
Kết quả:
Tham khảo: jquery.com
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com