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>
OR,
find()
searches through all the child elements in the matched set.
Description:
Get the descendants of each element in the current set of matched elements, filtered by a selector.
Syntax
.find( selector )
selector: A string containing a selector expression to match elements against.
.find( jQuery object )
jQuery object: A jQuery object to match elements against.
.find( element )
element: An element to match elements against.
filter()
searches through all elements in the matched set.
Description:
Reduce the set of matched elements to those that match the selector or pass the function's test.
Syntax
.filter( selector )
selector: A string containing a selector expression to match the current set of elements against.
.filter( function(index) )
function(index): A function used as a test for each element in the set. this is the current DOM element.
.filter( element )
element: An element to match the current set of elements against.
.filter( jQuery object )
jQuery object: An existing jQuery object to match the current set of elements against.
Example
<html>
<head>
<script src="jquery_1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function filter_month(obj){
jQuery('div').css('background','white');
jQuery('div').filter(obj).css('background', '#83AFF8');
}
function find_month(obj){
jQuery('div').css('background','white');
jQuery('div').find(obj).css('background', '#83AFF8');
}
</script>
</head>
<body>
<div id="months">
<table>
<tr>
<td> January </td>
<td> February </td>
<td> March </td>
<td> April </td>
</tr>
<tr>
<td> May </td>
<td> June </td>
<td> July </td>
<td> August </td>
</tr>
<tr>
<td> September </td>
<td> October </td>
<td> November </td>
<td> December </td>
</tr>
</table>
</div>
<div>
<b> Category</b>
<div id="months"> Month </div>
<div id="weeks"> Weeks </div>
</div>
<input onclick = "filter_month('#months');" type = "button" value ="Filter" />
<input onclick = "find_month('#months');" type = "button" value ="Find" />
</body>
</html>
January February March April
May June July August
September October November December
Category
Month
Weeks