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>
Try Demo
Any Java questions or problems? please post at this JavaNullPointer.com forum, see you there ~
[ Read More ] You can find more similar articles at jQuery Tutorials