How to get the children of the $(this) selector?

Learn, how to get the children of the $(this) selector in jQuery?
Submitted by Pratishtha Saxena, on June 10, 2022

$(this) keyword in jQuery refers to the owner of the object we are calling, and if there is no object then it refers to the function it is used in.

What is the need to get children of an element?

When we need to target the tags used inside a particular html tag then we need to find the child tags of that particular html tag.

Example Diagram: get the children of the $(this) selector

In the above diagram, <ul>, <p>, <span>, and <img> are children of <div>. Similarly, <a> and <h3> are children of <p> tag.

Now, how to get these child tags using jQuery. Basically, we have two methods to find the children:

Using children() Method
Using find() Method

Note: Always put the jQuery CDN link while working with jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

1) Using children() Method

As the name suggests, it will target all the children of the specified tag. Always remember it will never target the grand-children of the element (Grand-children are the children of the child element).

Syntax:

$(selector).children(filter)

Here, the selector can be a specified tag or even an id. Make sure while writing down the id you put the # tag before it. The filter here is the property that you want the children of the specified tag to do.

Example 1:

HTML Code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   </head>
   <body>
      <div id="first">
         <h1>Heading</h1>
         <div id="second">
            <h2>Sub-Heading</h2>
            <div id="third">
               <h3>Body</h3>
               <div>A</div>
               <div>B</div>
               <div>C</div>
               <div>D</div>
            </div>
         </div>
      </div>
   </body>
</html>

jQuery Function:

<script>
    $(document).ready(function(){
        $('#third').children().css('background','red');
    });
</script>

Output:

Example 1: get the children of the $(this) selector

2) Using find() Method

This method in jQuery is also used to target the child elements of the specified tag. So it can be said that it is similar to the children() method, but the only difference here is that children() only target the children of the element and not the grand-children. But this is not the case with find(). This method targets all the children and their respective grandchildren.

Syntax:

$(selector).find(filter)

Example 2:

HTML Code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   </head>
   <body>
      <div id="first">
         <h1>Heading</h1>
         <div id="second">
            <h2>Sub-Heading</h2>
            <div id="third">
               <h3>Body</h3>
               <div class="one">A</div>
               <div class="two">B</div>
               <div class="three">C</div>
               <div class="four">D</div>
            </div>
         </div>
      </div>
   </body>
</html>

jQuery Function:

<script>
    $(document).ready(function(){
    $('#third').find('.four').css('background','yellow');
    });
</script>

Output:

Example 2: get the children of the $(this) selector