logo
jQuery Traversing Filtering
The jQuery provides several basic filtering methods are first(), last() and eq(), which allow you to select a specific element based on its position in a group of elements.

Other filtering methods, like filter() and not() allow you to select elements that match, or do not match, a certain criteria.
jQuery first() Method

The jQuery first() method filters the set of matched elements and returns the first element of the specified elements.

The following example selects the first <div> element :

<!DOCTYPE html>
<html>
<head>
<title>jQuery first() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
    $(document).ready(function(){
    $("div").first().css("background-color", "#FF0");
});
</script>
<style type="text/css">
.border{border:1px solid #0099da; margin:10px 0px; }
</style>
</head>
 
<body>
 
<h4>Welcome to FTL</h4>
<p>Free Time Learning</p>
 
<div class="border">
  <p>www.freetimelearning.com</p>
</div>
 
<div class="border">
  <p>www.freetimelearning.com</p>
</div>
 
<div class="border">
  <p>www.freetimelearning.com</p>
</div>
 
</body>
</html>
Output :
jQuery last() Method

The jQuery last() method filters the set of matched elements and returns the last element of the specified elements.

The following example selects the last <div> element :

<!DOCTYPE html>
<html>
<head>
<title>jQuery last() Method</title>
<script src="js/jquery-3.2.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("div").last().css("background-color", "#FF0");
});
</script>
<style type="text/css">
.border{border:1px solid #0099da; margin:10px 0px; }
</style>
</head>
 
<body>
 
<h4>Welcome to FTL</h4>
<p>Free Time Learning</p>
 
<div class="border">
  <p>www.freetimelearning.com</p>
</div>
 
<div class="border">
  <p>www.freetimelearning.com</p>
</div>
 
<div class="border">
  <p>www.freetimelearning.com</p>
</div>
 
</body>
</html>
Output :
jQuery eq() Method

The jQuery eq() method filters the set of matched elements and returns an element with a specific index number of the selected elements.

The index numbers start at 0, so the first element will have the index number 0 and not 1. The following example selects the second <p> element (index number 1) :

<!DOCTYPE html>
<html>
<head>
<title>jQuery eq() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
   $(document).ready(function(){
   $("p").eq(1).css("background-color", "#FF0");
});
</script>
</head>
<body>
 
<h4>Welcome to FTL</h4>
 
<p>Free Time Learning</p>
<p>www.freetimelearning.com</p>
<p>www.freetimelearn.com</p>
<p>www.freetimelearning.xyz</p>
<p>www.freetimelearn.xyz</p>
 
</body>
</html>
Output :
jQuery filter() Method

The jQuery filter() method can take the selector or a function as its argument to filters the set of matched elements based on a specific criteria.

The supplied selector or function to the filter() method is tested against each element in the set of matched elements and all the elements that matching the supplied selector or pass the function's test will be included in the result.

As stated earlier you can also pass a function to the filter() method to filter the set of matched elements based on certain conditions. The following example will test each <li> element within the <ul> and highlight those <li> elements whose indexes are odd numbers i.e. highlights only second and fourth list item as the index is zero-based.

Syntax

$(selector).filter(criteria,function(index))

<!DOCTYPE html>
<html>
<head>
<title>jQuery filter() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
 
    $("h4").filter(":even").addClass("highlight");
 
    $("p").filter(function(index){
        return index % 2 !== 0;
    }).addClass("highlight");
 
});
</script>
 
<style type="text/css">
    .highlight{
        background:#FC0;
    }        
</style>
</head>
 
<body>
 
<h3>Free Time Learning</h3>
    <h4>1. www.freetimelearning.com</h4>
    <h4>2. www.freetimelearn.com</h4>
    <h4>3. www.freetimelearning.xyz</h4>
    <h4>4. www.freetimelearn.xyz</h4>
    <hr />
    <h3>Free Time Learning</h3>
    <p>1. www.freetimelearning.com</p>
    <p>2. www.freetimelearn.com</p>
    <p>3. www.freetimelearning.xyz</p>
    <p>4. www.freetimelearn.xyz</p>
 
    
</body>
</html>  
Output :
jQuery not() Method

The jQuery not() method filters the set of matched elements and returns all elements that do not match the criteria.

The following example returns all <p> elements that do not have class name "bg_color":

<!DOCTYPE html>
<html>
<head>
<title>jQuery not() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
   $("p").not(".bg_color").css("background-color", "#FF0");
});
</script>
</head>
<body>
 
<h4>Welcome to FTL</h4>
 
<p class="bg_color">Free Time Learning</p>
<p>www.freetimelearning.com</p>
<p class="bg_color">www.freetimelearning.xyz</p>
<p>www.freetimelearn.com</p>
<p class="bg_color">www.freetimelearn.xyz</p>
 
</body>
</html>
Output :
jQuery each() Method
The each() method specifies a function to run for each matched element.
Syntax
$(selector).each(function(index,element))
Parameter Description
function(index,element) Required. A function to run for each matched element.
  • index : The index position of the selector
  • element : The current element (the "this" selector can also be used)
<!DOCTYPE html>
<html>
<head>
<title>jQuery each() Method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("li").each(function(){
            alert($(this).text())
        });
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
 
<body>
 
<button type="button" class="btn">Click Here! (each())</button>
 
<ul>
  <li>HTML / HTML5</li>
  <li>CSS / CSS3</li>
  <li>JavaScript</li>
  <li>jQuery</li>
  <li>Bootstrap</li>
</ul>
  
</body>
</html>
Output :