Beena Shetty: 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

Beena Shetty

Thursday, 9 August 2012

Difference between find() and filter() in jquery

find()

filter()

4 comments: