Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Difference between find() and filter() methods

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 991
    Comment on it

    Both the methods are similar to each other.

    It is hard to understand the difference between jQuery find() and filter() methods. The difference between the two is that find() method searches for all the elements in the selector while the filter() method searches for all the child elements.

    find():-

    Description-

    In jQuery the .find() method get the descendent elements by passing through various level down the DOM. It is also known as traversal filtering.

    Syntax-

    • .find(selector)- Here in selector we put an expression with that element is matched. It describes which element to find.The selector may written in any CSS 1 to 3 syntax.
    • .find(jQuery object)  
    • .find( element )
    $(selector).find(filter)

     

    Example-

    <html>
    
       <head>
          <title>Find method</title>
          <script type = "text/javascript" 
             src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            
          <script type = "text/javascript" language = "javascript">
             $(document).ready(function() {
                // find the span element and add this css into it
                $("ul").find("span").css({"color": "#ff3333", "border": "2px solid #1a0000"}); 
             });
          </script>
            
          <style>
             div{
                width: 100%;
                margin:0 auto;
             }
             li{
                list-style: none;
                padding: 10px 5px;
                font-size: 20px;
             }
          </style>
       </head>
        
       <body>
        
          <div>
           <ul>
              <li>The find() method<span>returns descendant elements of the selected element.</span></li>
              <li>A descendant is a child, grandchild, great-grandchild, and so on.</li>
              <li>To return all of the descendant elements, use the<span> "*" selector.</span></li>
            </ul>
    
          </div>
            
       </body>
        
    </html>

     

    Here is the link of above code:-

    https://jsfiddle.net/e1L9w8L6/2/

     

    filter():-

    Description-

    In jQuery the .filter() method get all the elements by passing through various level of DOM. It is also known as collection filtering


     Syntax-

    • .filter( selector )-Here in selector we put an expression with that element is matched. It specifies which HTML element to be selected.
    • .filter( function(index) )
    • .filter( element )
    • .filter( jQuery object )
    $(selector).filter(criteria,function(index))

     

    Example-

    <html>
    
       <head>
          <title>filter method</title>
          <script type = "text/javascript" 
             src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
          <script type = "text/javascript" language = "javascript">
             $(document).ready(function() {
                $("li").filter(".filter").css({"color": "#ff3333", "border": "2px solid #1a0000"});
             });
          </script>
            
          <style>
             div{
                width:100%;
                margin: 0 auto;
             }
             li{
                font-size: 20px;
                padding: 10px 5px;
                list-style: none;
             }
          </style>
       </head>
        
       <body>
        
          <div>
             <ul>
                <li>The filter() method returns elements that match a certain criteria.</li>
                <li>To specify multiple criteria, use comma.</li>
                <li class = "filter">The filter() method is the opposite of the not() method.</li>
                <li>The filter() method lets you specify a criteria.</li>
                <li class = "filter"> The index position of the element in the set</li>
             </ul>
          </div>
            
       </body>
        
    </html>

     

    Here is the link of the above code:-

    https://jsfiddle.net/hpx9om3q/2/

     

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: