JQuery API: :nth-last-of-type() Selector

:nth-last-of-type() Selector sẽ chọn các phần tử con thứ n tính từ cuối lên trong số các phần tử cùng cấp và có cùng tên thẻ nằm trong một 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-of-type() 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-of-type(1)" ) sẽ lựa chọn phần tử li cuối cùng, $( "li:nth-last-of-type(2)" ) sẽ lựa chọn phần tử li kế cuối.

Cú pháp

Cú pháp
jQuery( ":nth-last-of-type(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-of-type(even), :nth-last-of-type(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ẻ li con của thẻ ul) và định dạng cho chúng:

Code RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Học lập trình miễn phí tại freetuts.net</title>
        <script src="https://freetuts.net/cnd/js/jquery/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.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-of-type(1)" ).css( "color", "red");
            }
        </script>
    </body>
</html>

Kết quả:

 

Tham khảo: jquery.com

Nguồn: freetuts.net