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>
    <script src="https://ajax.googleapis.com/ajax/libs/
                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>
    <script src="https://ajax.googleapis.com/ajax/libs/
                 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:

My Personal Notes

Related Articles

jQuery | children() with Examples