Open In App

jQuery children() Method

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery children() method is used to find all the child elements of the selected element. This children() method in jQuery traverses down to a single level of the selected element and returns all child elements.

Syntax:

$(selector).children()

Parameter:

It accepts an optional parameter that specifies the child selector to filter a particular child from all the children elements.

Return values:

By default, it returns all the children of the selected element.

Example 1: In the below code, the children() method is called without any parameter to select all the child elements.

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .parent * {
            display: block;
            border: 2px solid lightgrey;
            color: grey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src=
    </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:

Example 2: In the below code, the children() method is called with a parameter to select a particular child element.

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .descendants * {
            display: block;
            border: 2px solid lightgrey;
            color: grey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src=
    </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:

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads