jQuery | Traversing Filtering - ❤️️ Online JQuery tutorial

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 w3wiki !!!</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 w3wiki !!!</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 w3wiki !!!</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 w3wiki !!!</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 w3wiki !!!</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:

jQuery | Traversing Filtering

Contact Us