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

  • jQuery Filtering

    @nanda.puri
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 446
    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:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    5. <script>
    6. $(document).ready(function(){
    7.     $("div p").first().css("background-color", "yellow");
    8. });
    9. </script>
    10. </head>
    11. <body>
    12.  
    13. <h1>Welcome </h1>
    14. <div style="border: 1px solid black;">
    15.   <p>First Line</p>
    16.   <p>Last Line</p>
    17. </div>
    18. </body>
    19. </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:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    5. <script>
    6. $(document).ready(function(){
    7.     $("div p").last().css("background-color", "yellow");
    8. });
    9. </script>
    10. </head>
    11. <body>
    12.  
    13. <h1>Welcome </h1>
    14. <div style="border: 1px solid black;">
    15.   <p>First Line</p>
    16.   <p>Last Line</p>
    17. </div>
    18. </body>
    19. </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:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    5. <script>
    6. $(document).ready(function(){
    7.     $("p").eq(1).css("background-color", "yellow");
    8. });
    9. </script>
    10. </head>
    11. <body>
    12.  
    13. <h1>Welcome </h1>
    14.  
    15. <p>First</p>
    16. <p>Second</p>
    17. <p>Third</p>
    18. <p>Fourth</p>
    19.  
    20. </body>
    21. </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:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    5. <script>
    6. $(document).ready(function(){
    7.     $("p").filter(".intro").css("background-color", "yellow");
    8. });
    9. </script>
    10. </head>
    11. <body>
    12.  
    13. <h1>Welcome</h1>
    14.  
    15. <p class="intro">First</p>
    16. <p class="intro">Second</p>
    17. <p>Third</p>
    18. <p>Fourth</p>
    19.  
    20. </body>
    21. </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:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    5. <script>
    6. $(document).ready(function(){
    7.     $("p").not(".intro").css("background-color", "yellow");
    8. });
    9. </script>
    10. </head>
    11. <body>
    12.  
    13. <h1>Welcome</h1>
    14.  
    15. <p>First</p>
    16. <p class="intro">Second</p>
    17. <p class="intro">Third</p>
    18. <p>Fourth</p>
    19.  
    20. </body>
    21. </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.

    Filtering in Jquery JQuery first() method last() method eq() method filter() method not() method
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: