Skip to content
Related Articles

Related Articles

Improve Article

Differentiate between find() and children() Methods

  • Last Updated : 04 Aug, 2021

Before looking at the differences between the find() and children() method. Let us briefly understand what are these and what they do.

find(): This method is used to get all the filtered descendants of each element in the current set of matched elements.

Syntax:

$(selector).find('filter-expression')

Parameter:  A selector expression, element, or jQuery object to filter the search for descendants.

Return values: It returns all the matched descendants of the element on which the find() method is called. This method traverses the DOM all way down to the last descendant. It means it traverses all levels down to the DOM, like a child, grandchild, great-grandchild, and so on.



Example 1: In the output, we can clearly see that all the ‘span‘ tags color changed, who is descendant of p tag.

HTML




<!DOCTYPE html>
  
<head>
    <!-- jQuery library -->
    <script src=
    </script>
</head>
  
<body>    
    <p><span>Hello </span>Geeks!</p>
  
    <div>
        <p>Hey! <span>How </span>are you</p>
    </div>
  
    <script>
        $('p').find('span').css('color','blue')
    </script>
</body>
</html>

Output:

children(): The children() method are also used to get all the descendants of each element in the set of matched element. We can also filter the result.

Syntax:

$(selector).children(filter-expression)

Parameter: (Optional) If we don’t provide any filter expression, it will return all the direct children of the selected element. To filter the result, pass the argument.

Return value: It returns only the direct children of the selected element.

 



Example 2: We can see that the color of p tags changed who were direct children of class ‘a’. And if we haven’t provided any filter expression to children() method, then all the p tag would be blue because class ‘b’ is also a direct child of class ‘a’

HTML




<!DOCTYPE html>
  
<head>
    <!-- jQuery library -->
    <script src="https://code.jquery.com/jquery-git.js"></script>
</head>
  
<body>
    <div class="a">
        <p>Hello geeks</p>
  
        <div class="b">
            <p>Hey Geeks</p>
        </div>
        <p>Hello geeks</p>
  
    </div>
    <script>
        $('.a').children('p').css('color','blue')
    </script>
</body>
  
</html>

Output:

Differences between find() and children() methods: The working of both the method is almost the same. There is only one major difference between them, let’s see what is it.

Let’s take an example.

HTML




<!DOCTYPE html>
  
<head>
    <!-- jQuery library -->
    <script src=
            type="text/javascript">
    </script>
</head>
  
<body>
    <div class=a>
        <p id="a1"> a1 </p>
        <p id="a1"> a2 </p>
          
        <div class=b>
            <p id="a2"> b1 </p>
            <p id="a2"> b1 </p>
              
            <div class=c>
                <p id="a3"> c1 </p>
                <p id="a3"> c2 </p>
            </div>
        </div>
    </div>
      
    <script>
        $(".a").find("p").css('color','red')
        $(".a").children("p").css('color','blue')
    </script>
</body>
  
</html>

Output:

We have taken 3 classes a, b and c and each contains two “p” tags.

Let us see what will happen when we call find() and children() method on this structure. 

On calling find() method on class ‘a’, it will go all down to the last descendant and search for p tag everywhere. It checks its children, then children of children, and so on.

On calling children() method on class ‘a’, it will only check its direct children, i.e. it will only check in one level.

                                            find()                                       children()
This method is used to search more than one level down the DOM tree.This method is used to search a single level down the DOM tree.
It is slower than the children() method.It is faster than the find() method.



My Personal Notes arrow_drop_up
Recommended Articles
Page :