Hàm :nth-last-child() Selector trong jQuery - JQuery API
Cú pháp jQuery( ":nth-last-child(index)" )
:nth-last-child() Selector sẽ chọn tất cả các phần tử con thứ n nào đó tính từ cuối lên 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-last-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). Ví dụ, $( "li:nth-last-child(1)" ) sẽ lựa chọn phần tử li cuối cùng, $( "li:nth-last-child(2)" ) sẽ lựa chọn phần tử li kế cuối.
:nth-last-child() và :nth-child() khác nhau ở vị trí bắt đầu đếm do đó sẽ đem lại các kết quả khác nhau hoàn toàn.
Cú pháp
1 | jQuery( ":nth-last-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-last-child(even),:nth-last-child(4n)).
Ví dụ
Tìm kiếm các thẻ li mô tả tác giả của khóa học(thẻ li cuối cùng trong số các thẻ con của thẻ ul) và định dạng cho chúng:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Học lập trình miễn phí tại Zaidap.com.net</title> </head> <body> <h1>Học lập trình miễn phí tại Zaidap.com.net</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 1</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-last-child(1)" ).css( "color", "red"); } </script> </body></html> |
Kết quả:
Tham khảo: jquery.com
Nguồn: Zaidap.com.net
