JQuery API: Child Selector (“parent > child”)

Child Selector sẽ lựa chọn tất cả các phần tử con trực tiếp được chỉ định bởi "child" của các phần tử được chỉ định bởi "parent".

Lưu ý rằng selector này sẽ chỉ chọn ra các phần tử là con cấp một của phần tử "parent".

Cú pháp

Cú pháp
jQuery( "parent > child" )

Trong đó:

  • parent là một selector hợp lệ bất kì.
  • child là một bộ lọc để lọc các phần tử con cần thiết.

Ví dụ

Tìm kiếm tất cả các thẻ li nằm trong thẻ ulclass=topnav và đổi màu cho chúng:

Code RUN
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>all demo</title>
        <style>
            textarea {
                height: 35px;
            }
            div {
                color: red;
            }
            fieldset {
                margin: 0;
                padding: 0;
                border-width: 0;
            }
            .marked {
                background-color: yellow;
                border: 3px red solid;
            }
        </style>
        <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="topnav">
            <li>Item 1</li>
            <li>Item 2
                <ul>
                <li>Nested item 1</li>
                <li>Nested item 2</li>
                <li>Nested item 3</li>
                </ul>
            </li>
            <li>Item 3</li>
        </ul>
        <div id="result"></div>
        <button onclick="myFunction()">Click vào đây để xem kết quả</button>
        <script>
            function myFunction(){
                $( "ul.topnav > li" ).css( "border", "3px double red" );
            }
        </script>
    </body>
</html>

Kết quả:

 

Tham khảo: jquery.com

Nguồn: freetuts.net