Cách dùng :only-child Selector trong jQuery

Only child Selector sẽ chọn các phần tử con là con duy nhất của phần tử cha. Nói một cách khác thì nó sẽ chọn tất cả các phần tử mà không có các phần tử anh chị em cùng cấp với nó.

Lưu ý rằng không phải chỉ là các phần tử cùng tên thẻ mới được tính là anh chị em, nếu có bất kì phần tử nào cùng cấp( kể cả khác tên thẻ) cùng cấp thì phần tử đó sẽ không được Only child Selector lựa chọn.

Cú pháp

jQuery( ":only-child" )

Ví dụ

Tìm kiếm các thẻ h3 không có các thẻ anh chị em cùng cấp 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 nguyengiatech.com</title>
        <script src="https://nguyengiatech.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 nguyengiatech.com</h1>

        <ul class="freetut">
            <h3>Khóa học 1</h3>
        </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(){
                $( "h3:only-child" ).css( "color", "red");
            }
        </script>
    </body>
</html>

Kết quả:

Tham khảo: jquery.com