Thursday 9 August 2012

Difference between find() and filter() in jquery

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


4 comments: