Post
Ask Question

Find Vs Filter In jQuery

Introduction 

Basically,  Find and Filter functions in jQuery sound very similar. In this blog, we are going to see  when to use Filter instead of Find.

  • find()
  • filtervsfind.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title></title>  
  6.   
  7.      
  8.   
  9.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  10.      
  11. </head>  
  12. <body>  
  13. <h3>Filter Vs find</h3>  
  14. <ul id="ulist">  
  15. <li id="li1"class="li" > Apple</li>  
  16. <li id="li2" class="li">Orange</li>  
  17. <li id="li3"> Grapes </li>  
  18. </ul>  
  19.   
  20. <h4>Output</h4>  
  21. <ul id="message">  
  22. </ul>  
  23. <br/>  
  24. <button id="btnClick">Click Me</button>   
  25.   
  26. </div>  
  27.     <script>  
  28.      $(document).ready(function () {  
  29.        
  30.        
  31. var $name=$('#ulist li');  
  32. var $li=$name.find(".li");  
  33. var $output =$('#message');  
  34. $("#btnClick").on("click",function(){  
  35. debugger;  
  36. if($li.length)  
  37. {  
  38. var html="";  
  39.   $li.each(function()  
  40.   {  
  41.   html+="<li>" + $(this).text() + "</li>";  
  42.   });   
  43.   $output.append(html)  
  44. }  
  45. else  
  46. {  
  47. $output.append("<li> No Element Found</li>")  
  48. }  
  49.   
  50. })  
  51. })  
  52.   
  53.   
  54.     </script>  
  55.   
  56. </body>  
  57. </html>  
Output
 
 
Click on the "Click Me" button.
 

The above HTML page consists of three items in the list. In the jQuery, we used the selector ($name=$('#ulist li')) to select the li. From the selector, we found the li which consists of the class name as li ($name.find(".li")), but no element is selected using the Find function.

Reason

The Find function will always look for the child element whereas the Filter function will check for an exact match.

filter() 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title></title>  
  6.   
  7.      
  8.   
  9.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  10.      
  11. </head>  
  12. <body>  
  13. <h3>Filter Vs find</h3>  
  14. <ul id="ulist">  
  15. <li id="li1"class="li" > Apple</li>  
  16. <li id="li2" class="li">Orange</li>  
  17. <li id="li3"> Grapes </li>  
  18. </ul>  
  19.   
  20. <h4>Output</h4>  
  21. <ul id="message">  
  22. </ul>  
  23. <br/>  
  24. <button id="btnClick">Click Me</button>   
  25.   
  26. </div>  
  27.     <script>  
  28.      $(document).ready(function () {  
  29.        
  30.        
  31. var $name=$('#ulist li');  
  32. var $li=$name.filter(".li");  
  33. var $output =$('#message');  
  34. $("#btnClick").on("click",function(){  
  35. debugger;  
  36. if($li.length)  
  37. {  
  38. var html="";  
  39.   $li.each(function()  
  40.   {  
  41.   html+="<li>" + $(this).text() + "</li>";  
  42.   });   
  43.   $output.append(html)  
  44. }  
  45. else  
  46. {  
  47. $output.append("<li> No Element Found</li>")  
  48. }  
  49.   
  50. })  
  51. })  
  52.   
  53.   
  54.     </script>  
  55.   
  56. </body>  
  57. </html>  
Output


Now, you can see the result with the list consisting of li class names by clicking the button.

Reason

The Filter function always looks for the exact match. 

I hope you have learned from this blog. Your valuable feedback, questions, or comments about this blog are always welcome.
Next Recommended Reading Templates In jQuery Load With More Than 1000 Records Of Data Using JQuery Templates