Differentiate between find() and children() Methods
Last Updated :
12 Apr, 2022
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>
<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>
</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>
<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. |
|
Its syntax is -:
$(selector).find(filter)
|
Its syntax is -:
$(selector).children(filter)
|
| It takes Parameter as a filter expression |
It takes parameter as a filter |
| It is used to return the descendant elements of the selected element |
It is used to return all the direct children of the selected element. |
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...