jQuery | Traversing Filtering Last Updated : 25 Feb, 2019 Improve Improve Like Article Like Save Share Report 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: <!DOCTYPE html> <html> <head> <title> jQuery first() method </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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> 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: <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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> 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: <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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> 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: <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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> 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: <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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> Output: Like Article Suggest improvement Previous How to detect a mobile device in jQuery? Next Introduction to ES6 Share your thoughts in the comments Add Your Comment Please Login to comment...