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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 397
    Comment on it

    jQuery Filtering:

        When we have to select a specific element out of various given elements filtering is required.
      In Jquery there are some filtering methods divided into two groups:

    1. Methods that select a specific element based on its position in a group of elements, such as first(), last() and eq().

    2. Methods that select elements that match, or do not match, a certain criteria, such as filter() and not().

    Methods that select a specific element based on its position in a group of elements:

    1. first():
        This method is used to select the first element among the group of elements.

    Example:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("div p").first().css("background-color", "yellow");
    });
    </script>
    </head>
    <body>
    
    <h1>Welcome </h1>
    <div style="border: 1px solid black;">
      <p>First Line</p>
      <p>Last Line</p>
    </div>
    </body>
    </html>
    

    In this example the first p tag gets selected (i.e the background color of the first line gets yellow).

    2. last():
        This method is used to select the last element among the group of elements.

    Example:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("div p").last().css("background-color", "yellow");
    });
    </script>
    </head>
    <body>
    
    <h1>Welcome </h1>
    <div style="border: 1px solid black;">
      <p>First Line</p>
      <p>Last Line</p>
    </div>
    </body>
    </html>
    

    In this example the last p tag gets selected (i.e the background color of the last line gets yellow).

    3. eq():
        This method is used to select an element at a specific index. In this we provide the index number of the element to be selected.

    Example:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("p").eq(1).css("background-color", "yellow");
    });
    </script>
    </head>
    <body>
    
    <h1>Welcome </h1>
    
    <p>First</p>
    <p>Second</p>
    <p>Third</p>
    <p>Fourth</p>
    
    </body>
    </html>
    

    In this example the second p tag gets selected (i.e the background color of the second line gets yellow).

    Note:-> As the index starts from zero therefore the first element will be at index 0.

    Methods that select elements that match, or do not match, a certain criteria:

    1. filter():
        This method is used to select the element or elements that fullfill (match) the given creteria.

    Example:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("p").filter(".intro").css("background-color", "yellow");
    });
    </script>
    </head>
    <body>
    
    <h1>Welcome</h1>
    
    <p class="intro">First</p>
    <p class="intro">Second</p>
    <p>Third</p>
    <p>Fourth</p>
    
    </body>
    </html>
    

    In this example the first two lines gets selected as they contain the class name='intro' i.e. we can say that as first two lines matches the condition therefore they get selected.

    2. not():
        This method is used to select the element or elements that do not fullfill (unmatch) the given creteria.It is inverse of the filter() method.

    Example:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("p").not(".intro").css("background-color", "yellow");
    });
    </script>
    </head>
    <body>
    
    <h1>Welcome</h1>
    
    <p>First</p>
    <p class="intro">Second</p>
    <p class="intro">Third</p>
    <p>Fourth</p>
    
    </body>
    </html>
    

    In this example the first & the fourth line gets selected as they do not fullfill the criteria. i.e. as the first & the fourth line does not contain the class 'intro' therefore they get selected.

 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: