How to find all children with a specified class using jQuery ?

Last Updated : 29 Nov, 2021

There are lots of javascript libraries like - anime.js, screenfull.js, moment.js, etc. JQuery is also a part of javascript libraries. It is used to simplify the code. It is a lightweight and feature-rich library.

In this article, we will learn how to find all children with a specified class of each division.

.children(selector) - In jquery you can achieve this task by using the method named .children(). It takes the selector as a parameter and changes the children element with the specified name.

Example 1:

HTML

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-git.js">
    </script>

    <style>
        body {
            font-size: 20px;
            font-style: italic;
            background-color: green;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <h1 class="child">
            GeeksForGeeks
        </h1>

        <span>
            This is a span in div element.
            (children but not specified)
        </span>

        <p class="child">
            This is a paragraph with specified 
            class in a div element.
        </p>


        <div class="child">
            This is inner div with specified 
            class in a div element.
        </div>

        
<p>
            This is another paragraph in div 
            element.(children but not specified)
        </p>

    </div>

    <script>
        $("div").children(".child").css({
            "background-color": "lightgreen",
            "border-style": "inset"
        });
    </script>
</body>

</html>

Output:

Explanation: The div element has 5 children ( 1 heading, 1 span, 1 inner div, and 3 paragraphs). In the code, we have specified three-element with class="child" i.e. two paragraphs and one div. You can notice that only specified elements get affected and change their style property.

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>
    
    <style>
        body {
            font-size: 20px;
            font-style: italic;
            background-color: green;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <h1>GeeksForGeeks</h1>

        
<p>
            class with prime will only 
            get different style property
        </p>


        
<p>'1' is not a prime number.</p>


        <p class="prime">'2' is a prime number.</p>


        <div class="prime">'3' is a prime number.</div>

        
<p>'4' is not a prime number.</p>


        <p class="prime">'5' is a prime number</p>

    </div>
    
    <script>
        $("div").children(".prime").css({
            "background-color": "lightgreen",
            "border-style": "inset"
        });
    </script>
</body>

</html>

Output -

How to select a div with a certain class using jQuery ?

volumezero9786

Improve

Article Tags :

How to find all children with a specified class using jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?