Friday, 20 October 2017

Difference between filter() and find() method 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>
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>



JanuaryFebruaryMarchApril
MayJuneJulyAugust
SeptemberOctoberNovemberDecember

Category
Month
Weeks
   
Posted by at

1 comment:

Subscribe to: Post Comments (Atom)