Skip to content
Related Articles

Related Articles

jQuery | children() with Examples
  • Last Updated : 13 Feb, 2019

children() is an inbuilt method in jQuery which is used to find all the children element related to that selected element. This children() method in jQuery traverse down to a single level of the selected element and return all elements.

Syntax:

$(selector).children()

Here selector is the selected element whose children are going to be found.
Parameter: It does not accept any parameters.
Return values: It returns all the children of the selected element.

jQuery code to show the working of this function:

Code #1: In the below code, all the elements directly connected to the “div” element get highlighted with the green color.




<html>
   
<head>
    <style>
        .parent * {
            display: block;
            border: 2px solid lightgrey;
            color: grey;
            padding: 5px;
            margin: 15px;
        }
    </style>
                jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div").children().css({
                "color": "green",
                "border": "2px solid green"
            });
        });
    </script>
</head>
   
<body>
   
    <div class="parent" style="width:500px;">This is the current element !!!
        <p>This is first children
            <span>This is grandchild</span>
        </p>
        <p>This is Second children
            <span>This is grandchild</span>
        </p>
    </div>
   
</body>
   
</html>

Output:



An optional parameter can also be used to the children() method to filter the search for children elements.
Syntax:

$(selector1).children("selector2")

Here selector1 is the selected element whose children are going to be found.
Parameters: It accepts a parameter which is specified below-

  • selector2: This is the prior children among all the children of the selected element.

    Return value: It returns the prior children of the selected element.

    Code #2: In the below code, among all the paragraph element, elements of first paragraph gets selected and highlighted with thegreen color.




    <html>
       
    <head>
        <style>
            .descendants * {
                display: block;
                border: 2px solid lightgrey;
                color: grey;
                padding: 5px;
                margin: 15px;
            }
        </style>
                     jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("div").children("p.first").css({
                    "color": "green",
                    "border": "2px solid green"
                });
            });
        </script>
    </head>
       
    <body>
       
        <div class="descendants" style="width:500px;">This is the current element !!!
            <p class="first">This is the first paragraph element !!!
                <span>This is grandchild</span>
            </p>
            <p class="second">This is the second paragraph element !!!
                <span>This is grandchild</span>
            </p>
        </div>
       
    </body>
       
    </html>

    Output:

    full-stack-img

    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :