Main Tutorials

Difference between filter() and find() in jQuery

Both filter() and find() methods are very similar, except the former is applies to all the elements, while latter searches child elements only.

To simple

  1. filter() – search through all the elements.
  2. find() – search through all the child elements only.

jQuery filter() vs find() example


<html>
<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	div{
		padding:8px;
		border:1px solid;
	}
</style>

</head>

<body>

<h1>jQuery find() vs filter() example</h1>

<script type="text/javascript">

  $(document).ready(function(){
	
    $("#filterClick").click(function () {
		
	$('div').css('background','white');
		
	$('div').filter('#Fruits').css('background','red');
			
    });
	
    $("#findClick").click(function () {
		
	$('div').css('background','white');
		
	$('div').find('#Fruits').css('background','red');
			
    });
	
  });
</script>
</head><body>

<div id="Fruits">
	Fruits
	<div id="Apple">Apple</div>
	<div id="Banana">Banana</div>
</div>

<div id="Category">
	Category
	<div id="Fruits">Fruits</div>
	<div id="Animals">Animals</div>
</div>

<br/>
<br/>
<br/>

<input type='button' value='filter(Fruits)' id='filterClick'>
<input type='button' value='find(Fruits)' id='findClick'>

</body>
</html>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
21 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Paul Bevan
11 years ago

You should edit this article because as Patrick states it is incorrect! 🙂 Filter cannot search descendents of an element.

da man
10 years ago

This is totatlly wrong

.filter searches the top elements only
.find searches the descendent elements only

in a case of:
var a = $(”);

a.filter(‘div’) will find only the parent div
a.find(‘div’) will find only the child div

a.filter(‘div’).add(a.find(‘div’)) will find both.

da man
10 years ago
Reply to  da man

in a case of var a = $(‘[div][div][/div][/div]’);

Bob
10 years ago
Reply to  da man

The problem here is that $(‘div’).filter(‘#Fruits’) is tendentious since $(‘div’) matches ALL divs, so filter works… but for instance, $(‘body’).filter(‘#Fruits’) wont return anything.
Another funny thing is having id collision and looking for them. In fact, ONLY jQuery does this shit well. Native JS will only report the first element.

In conclusion, this article is pure shit and should not exist.

Patrick
11 years ago

filter() doesn’t “search through all the elements”, it searches through a set of elements but not their children or descendants. find() searches through all descendants but doesn’t include the parent element(s). I don’t know of a native jQuery function that searches a set of elements and each element’s descendants.

Barney
10 years ago
Reply to  Patrick

Absolutely correct and well worth mentioning. This Googles very highly and misleads.

Laxm Negi
11 years ago

awsome

LeeXC
4 years ago

The find method is for descendants, not just children.

Evenomz
6 years ago

Thx very much. Useful for me ^_^

Marvin
6 years ago

I find your answer trying to explain the distinction between JS array method find() and filter() incorrect. My understanding of both methods respectively is; method find() searches and returns (Results – One Item) immediately, which will obviously be the first match of an item in an array, on the other hand method filter() searches and returns an array(Results) of item(s) until the last element of an array.I also stand to be corrected ;), I hope we will both come to the same correct answer, if you find my reply incorrect as well.

Peace!

Aaron Li
6 years ago

find() vs filter() vs has()

http://jsfiddle.net/error_lee/qn6snsht/3/

Kgar
9 years ago

I have returned to this very useful article on more than one occasion. Thank you for it!

dallas
9 years ago

For me the main difference is that I can pass a function as a parameter of filter and do something more advanced.

Matt
10 years ago

Thank you for this.

Shil
10 years ago

$(document).ready(function(){
$(“p”).click(function(){
var content =”” +
“hai”+
“hello”+
“”;
alert(($(content)).filter(“#firstId”).text());
alert(($(content)).find(“#secondId”).text());
});
});

If you click on me, I will tell you the difference between filter() and find().

Run it in your application….you will understand in more better way

output:
For first alert output is : haihello
For second alert output is: hai
The only difference between filter and find is:
find searches for the elements which are child elements,
in the above example id secondId is a child div for the parent div of id firstId, And displays the content of the child div ( hai)only.br>
Filter searches for the elements which are parent elements in the above example id firstId is a parent div and displays the content of the complete div(haihello) including the content of secondId as the secondId is included in firstId.

gaz
11 years ago

Your document has 2 id=”Fruits”. You’ve broken one of the fundamental rules of html, where ids must be unique. That will cause you no end of issues as things get more complicated.

If you want multiple elements to be associated, then you should use classes instead.

Patrick
11 years ago

Quick and dirty solution…

function findAndFilter( $elements, selector ) {
    return $('<div></div>').append($elements).find(selector);
}

😛

Bob
11 years ago
Reply to  Patrick

The append would detach $elements from their parents. Better to use:

return $elements.filter(selector).add($elements.find(selector));
Patrick
11 years ago
Reply to  Bob

Good point! 😀

Sagar Ranpise
12 years ago

Awesome explanation very easy and clear!!! Thanks a lot for sharing this example!

Shil
10 years ago
Reply to  Sagar Ranpise

The explanation is completely wrong..don’t misguide other