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 the Author

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

Comments

avatar
15 Comment threads
6 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
16 Comment authors
EvenomzMarvinAaron LiKgardallas Recent comment authors
newest oldest most voted
Paul Bevan
Guest
Paul Bevan

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

da man
Guest
da man

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
Guest
da man

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

Bob
Guest
Bob

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
Guest
Patrick

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
Guest
Barney

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

Laxm Negi
Guest
Laxm Negi

awsome

Evenomz
Guest
Evenomz

Thx very much. Useful for me ^_^

Marvin
Guest
Marvin

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
Guest
Aaron Li

find() vs filter() vs has()

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

Kgar
Guest
Kgar

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

dallas
Guest
dallas

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

trackback
jQuery????????????????

[…] filter()?find()??? ?????????????????????????CSS???????????????????????????????????????????????????????????find??????????????????????filter??????????????????????????????????????????????????????? Difference between filter() and find() in jQuery – Mkyong.com […]

Matt
Guest
Matt

Thank you for this.

Shil
Guest
Shil

$(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… Read more »

gaz
Guest
gaz

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
Guest
Patrick

Quick and dirty solution…

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

:P

Bob
Guest
Bob

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

return $elements.filter(selector).add($elements.find(selector));
Patrick
Guest
Patrick

Good point! :D

Sagar Ranpise
Guest
Sagar Ranpise

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

Shil
Guest
Shil

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