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