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
- filter() – search through all the elements.
- 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>
You should edit this article because as Patrick states it is incorrect! 🙂 Filter cannot search descendents of an element.
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.
in a case of var a = $(‘[div][div][/div][/div]’);
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.
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.
Absolutely correct and well worth mentioning. This Googles very highly and misleads.
awsome
The find method is for descendants, not just children.
Thx very much. Useful for me ^_^
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!
find() vs filter() vs has()
http://jsfiddle.net/error_lee/qn6snsht/3/
I have returned to this very useful article on more than one occasion. Thank you for it!
For me the main difference is that I can pass a function as a parameter of filter and do something more advanced.
Thank you for this.
$(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.
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.
Quick and dirty solution…
function findAndFilter( $elements, selector ) { return $('<div></div>').append($elements).find(selector); }😛
The append would detach $elements from their parents. Better to use:
Good point! 😀
Awesome explanation very easy and clear!!! Thanks a lot for sharing this example!
The explanation is completely wrong..don’t misguide other