jQuery filtering selection of html elements; In this tutorial, I am going to show you how to use jQuery filter methods on selected html elements using first(), filter(), last(), eq(), slice(), has(), not().
jQuery Filtering Selection of HTML Elements
jQuery offers various filter methods such as first(), filter(), last(), eq(), slice(), has(), not(), etc. You can use to reduce the search or filter of elements in a DOM tree. Here we will demostrate all jQuery filter methods with examples:
- jQuery first() Method
- jQuery last() Method
- jQuery eq() Method
- jQuery filter() Method
- jQuery not() Method
- jQuery slice() Method
jQuery first() Method
Using the jQuery first() method can filter/get the first element of the selected HTML elements.
Syntax of jQuery first() Method
$("selector").first();
Example of jQuery first() method
Example for how to get/filter the first selected html elements using first () method; as shown below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery First Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.first{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
$(".first").first().css("background-color", "green");
});
</script>
</head>
<body>
<h1>This is first() method example</h1>
<div class="first">
<p>A paragraph in a div.</p>
<p>Another paragraph in a div.</p>
</div>
<br>
<div class="first">
<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
<br>
<div class="first">
<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
</body>
</html>
Demo for of jQuery first() method
This is first() method example
A paragraph in a div.
Another paragraph in a div.
A paragraph in another div.
Another paragraph in another div.
A paragraph in another div.
Another paragraph in another div.
jQuery last() Method
Using the jQuery last() method can filter/get the last element of the selected HTML elements.
Syntax of jQuery last() Method
$("selector").last();
Example for jQuery last() Method
Example for how to get/filter the last selected html elements using last () method; as shown below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Last Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.last{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
$(".last").last().css("background-color", "green");
});
</script>
</head>
<body>
<h1>This is last() method example</h1>
<div class="last">
<p>A paragraph in a div.</p>
<p>Another paragraph in a div.</p>
</div>
<br>
<div class="last">
<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
<br>
<div class="last">
<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
</body>
</html>
Demo for jQuery last() Method
This is last() method example
A paragraph in a div.
Another paragraph in a div.
A paragraph in another div.
Another paragraph in another div.
A paragraph in another div.
Another paragraph in another div.
jQuery eq() Method
Using the jQuery eq () method search/filter the selected elements directly and returns an element with specific index.
Syntax of jQuery eq() Method
$("selector").eq();
Example for jQuery eq() method
Example for how to get/filter selected html elements using eq () method; as shown below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery eq() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.container{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
$(".container").eq(1).css("background-color", "green");
});
</script>
</head>
<body>
<h3>This is eq() method example</h3>
<div class="container">
<p>A paragraph in a div.</p>
<p>Another paragraph in a div.</p>
</div>
<br>
<div class="container">
<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
<br>
<div class="container">
<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
</body>
</html>
Demo for jQuery eq() method
This is eq() method example
A paragraph in a div.
Another paragraph in a div.
A paragraph in another div.
Another paragraph in another div.
A paragraph in another div.
Another paragraph in another div.
jQuery filter() Method
Using the jQuery filter () method can returns the elements that match a certain criteria. This method lets you specify a benchmark. Elements that do not match the criteria are removed from the selection, and those who match will be returned.
Syntax of jQuery filter() Method
$("selector").filter();
Example for jQuery filter() method
Example for the jquery filter method filters only those elements that match the criteria and make the background color white.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Filter() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.container{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
$("p").filter(".inClass").css("background-color", "white");
});
</script>
</head>
<body>
<h3>This is Filter() method example</h3>
<div class="container">
<p>A paragraph in a div.</p>
<p class="inClass">Another paragraph in a div.</p>
</div>
<br>
<div class="container">
<p>A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
<br>
<div class="container">
<p class="inClass">A paragraph in another div.</p>
<p>Another paragraph in another div.</p>
</div>
</body>
</html>
Demo for jQuery filter() method
This is Filter() method example
A paragraph in a div.
Another paragraph in a div.
A paragraph in another div.
Another paragraph in another div.
A paragraph in another div.
Another paragraph in another div.
jQuery not() Method
Using the not () method is returned to those elements which do not meet a specific criteria. This method lets you specify a benchmark. Elements that do not match the criteria are returned from selection, and those that will be removed from the match.
This is not the opposite () method filter () method.
Syntax of jQuery not() Method
$("selector").not();
Example of jQuery not() method
Example for the jquery not method filters only those elements that do not match the criteria and make the background color white.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Not() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.container{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
$("b").not(".inClass").css("background-color", "Red");
});
</script>
</head>
<body>
<h3>This is Not() method example</h3>
<div class="container">
<b>A paragraph in a div.</b>
<b class="inClass">Another paragraph in a div.</b>
</div>
</body>
</html>
Demo for jQuery not() method
This is Not() method example
jQuery slice() Method
Slice () method reduces the matching set of elements to the subset specified by a range of indices. This method accepts two integer values, index and end index starts. This method will return the elements between the start and the end index. The subset of elements consists of an element in the start index, but does not include the element in the end index.
Syntax of jQuery slice() Method
$(selector).slice(start,stop);
Example of jQuery slice() Method
Example for jQuery slice method; as shown below:
<!DOCTYPE html>
<html>
<head>
<title>jQuery slice() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.container{
padding: 15px;
border: 12px solid #23384E;
background: #28BAA2;
margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
$(".slclass").slice(2).css("background-color", "Yellow");
});
</script>
</head>
<body>
<h3>This is slice() method example</h3>
<div class="container">
<p class="slclass">A paragraph in a div.</p>
<p class="slclass">Another paragraph in a div.</p>
<p class="slclass">A paragraph in another div.</p>
<p class="slclass">Another paragraph in another div.</p>
<p class="slclass">A paragraph in another div.</p>
<p class="slclass">Another paragraph in another div.</p>
</div>
</body>
</html>
Demo for jQuery slice() Method
This is slice() method example
A paragraph in a div.
Another paragraph in a div.
A paragraph in another div.
Another paragraph in another div.
A paragraph in another div.
Another paragraph in another div.