Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Jquery Filtering Methods

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 176
    Comment on it

    The jquery filtering methods is used for the purpose for specifying the criteria, Those elements didn't matched with the criteria it will illuminate from the selection while the matched elements will be returned.
    It has multiple methods like eq(index), slice(), filter(), has(), first() and last().

    A brief introduction about all these methods are:-

    1. eq(index) Method:-
    This method returns an element with a specific index number of the selected elements, first index number is always "zero". it is also used for the purpose of reducing the set of matched elements to the specified index value.

    $(document).ready(function(){
       $("button").click(function(){
         $("li").eq(2).css({"font-size":"40px", "color":"#fa4b2a", "background-color":"#ccc"});
       })
      });

    2. slice() Method:- 

    Slice Method is used for setting the start and end time, It reduces the selecting range of elements by using the Start and end index value.

    $("li").slice(1,6).css({"font-size":"40px", "color":"green"});


     3. filter() and has() methods:-

    These methods are used to define the specify a condition for example A user want to add attributes to the table in alternate rows so by using filter method it is easy to done by using the syntax.

     $("li").filter(":even").css({"font-size":"40px", "color":"#fa4b2a"});

    like that Has() Method is used for its decendants elements.

    $("li").has("strong").css ({"font-family":"Verdana","color":"blue"}); 

    Source Code:-

      <!DOCTYPE html>  
      <html>  
       <head>  
         <title>Jquery Example : Jquery eq(index) Method </title>  
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script>  
     $(document).ready(function(){ 
       $("button").click(function(){
         $("li").eq(0).css({"font-size":"40px", "color":"#fa4b2a", "background-color":"#ccc"}); 
            $("li").slice(1,6).css({"font-size":"40px", "color":"green"});
             $("li").filter(":even").css({"font-size":"40px", "background-color":"#ccc"});
                  $("li").has("strong").css ({"font-family":"Verdana",
                                   "color":"blue"});
         // Select list item with Index no 2, starting from 0
       })
      });   
     </script>
     </head>  
          <body>
            <h2>jquery Filter methods</h2>  
       <ul>
         <li>The Doon school</li>
         <li><strong>St. Joseph Academy</strong></li>
         <li>Welham girls School</li>
         <li>Welham boys School</li>
         <li><strong>Brightlands school</strong></li>
         <li>Asian School </li>
         <li>Carman Residential School</li>
       </ul>
         <p>List of best schools in dehradun</p>
            <button>Run jQuery Script</button>
           </body>
    </html>

     

 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: