jQuery | Traversing Filtering

The traversing filtering in jQuery is used to find HTML elements based on their relation to the other elements. Filtering is the process in jQuery which is used to allow to find a particular element with some condition or without condition. There is five basic type of filtering method that can be used to select an element which is listed below:

  • first() Method
  • last() Method
  • eq() Method
  • filter() Method
  • not() Method
  • first() method: The first() method in jQuery is used to select the first element from the group of elements.

    Syntax:

    $(selector).first()

    Parameter: It does not accept any parameter.

    Return value: It returns the first element out of the selected elements.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
       
    <head>
        <title>
            jQuery first() method
        </title>
        <script src=
        </script>
          
        <!-- Script to use first() method -->
        <script>
            $(document).ready(function() {
                $("div").first().css("background-color", "lightgreen");
            });
        </script>
    </head>
       
    <body>
        <h1>Welcome to GeeksforGeeks !!!</h1>
          
        <div style="border: 1px solid green;">
            <p>This is the first statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the second statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the third statement.</p>
        </div>
        <br>
       
    </body>
       
    </html>

    chevron_right

    
    

    Output:

  • last() method: The last() method in jQuery is used to find the last element in a group of elements.

    Syntax:

    $(selector).last()

    Parameter: It does not accept any parameter.

    Return value: It returns the last element out of the selected elements.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
       
    <head>
        <script src=
        </script>
          
        <!-- Script to use last() method -->
        <script>
            $(document).ready(function() {
                $("div").last().css("background-color", "lightgreen");
            });
        </script>
    </head>
       
    <body>
        <h1>Welcome to GeeksforGeeks !!!</h1>
        <div style="border: 1px solid green;">
            <p>This is the first statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the second statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the third statement.</p>
        </div>
        <br>
       
    </body>
       
    </html>

    chevron_right

    
    

    Output:

  • eq() method: This method is used to select element with the specific index number.
    Syntax:

    $(selector).eq(index_number)

    Parameter: It takes an index number for specified element.

    Return value: It returns the element with specific index number of the selected elements.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
       
    <head>
        <script src=
        </script>
          
        <!-- Script to use eq() method -->
        <script>
            $(document).ready(function() {
                $("div").eq(1).css("background-color", "lightgreen");
            });
        </script>
    </head>
       
    <body>
        <h1>Welcome to GeeksforGeeks !!!</h1>
          
        <div style="border: 1px solid green;">
            <p>This is the first statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the second statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the third statement.</p>
        </div>
        <br>
       
    </body>
       
    </html>

    chevron_right

    
    

    Output:

  • filter() method: This method is used to select element with some specific criteria.
    Syntax:

    $(selector).filter(parameter)

    Parameter: It takes a class name or id name to filter specified element from the other with the same element name.

    Return value: It returns all element with the meeting criteria.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
       
    <head>
        <script src=
        </script>
          
        <!-- Script to use filter() method -->
        <script>
            $(document).ready(function() {
                $("div").filter(".demo").css("background-color", "lightgreen");
            });
        </script>
    </head>
       
    <body>
        <h1>Welcome to GeeksforGeeks !!!</h1>
          
        <div class="demo" style="border: 1px solid green;">
            <p>This is the first statement.</p>
        </div>
        <br>
       
        <div class="demo" style="border: 1px solid green;">
            <p>This is the second statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the third statement.</p>
        </div>
        <br>
       
    </body>
       
    </html>

    chevron_right

    
    

    Output:

  • not() method: This method is used to select all the elements which are not meeting some criteria.
    Syntax:

    $(selector).not(parameter)

    Parameter: It takes a class name or id name to de-select the elements from the other with the same element name.

    Return value: It returns all element which are not meeting criteria.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
       
    <head>
        <script src=
        </script>
          
        <!-- Script to use not() method -->
        <script>
            $(document).ready(function() {
                $("div").not(".demo").css("background-color", "lightgreen");
            });
        </script>
    </head>
       
    <body>
        <h1>Welcome to GeeksforGeeks !!!</h1>
          
        <div class="demo" style="border: 1px solid green;">
            <p>This is the first statement.</p>
        </div>
        <br>
       
        <div class="demo" style="border: 1px solid green;">
            <p>This is the second statement.</p>
        </div>
        <br>
       
        <div style="border: 1px solid green;">
            <p>This is the third statement.</p>
        </div>
        <br>
       
    </body>
       
    </html>

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.