- 4 years ago
- Zaid Bin Khalid
- 7346 Views
-
2
In this session, you will learn how to filter elements selection using jQuery with the help of an example.
Filtering the Elements Selection
JQuery provides several methods that you can use to narrow down the search for elements in a DOM tree for example filter ( ), first ( ), last ( ), eg ( ), slice ( ), has ( ), not ( ), etc.
The above all are filtering methods of jQuery. You can find more filtering methods of jQuery here.
jQuery first () Method
The method is used to filters the set of matched elements and returns the first element from the set called the jQuery first ( ) method.
With the help of the following example, you will only highlight the first <li> element within the <ul> element by adding the class .highlight on document ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery first() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").first().addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Last list item</li>
</ul>
</body>
</html>
jQuery last () Method
The method is used to filters the set of matched elements and returns the last element from the set is called the jQuery last ( ) method. With the help of the following example, you will only highlight the last <li> element within the <ul> element by adding the class .highlight when the document is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery last() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").last().addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Last list item</li>
</ul>
</body>
</html>
jQuery eq () Method
The method is used to filters the set of matched elements and returns only one element with the specified index number is called The jQuery eg( ) method. With the help of the following example, you will only highlight the second <li> element within the <ul> element by adding the class .highlight when the document is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").eq(1).addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Last list item</li>
</ul>
</body>
</html>
jQuery filter () Method
The method is used to take the selector or a function as its argument to filters the set of matched elements based on specific criteria is called The jQuery filter ( ) method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").filter(":even").addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
</ul>
</body>
</html>
jQuery has () Method
The method is used to filters the set of matched elements and returns only those elements that have the specified descendant element. With the help of the following example, you will only highlight all the <li> element that has the descendant <ul> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").has("ul").addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>
<ul>
<li>Section 2.1</li>
<li>Section 2.2</li>
<li>Section 2.3</li>
</ul>
</li>
<li>Section 4</li>
</ul>
</body>
</html>
jQuery not () Method
The method is used to filters the set of matched elements and returns all elements that do not meet the specified conditions is called the jQuery not ( ) not a method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery not() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").not(":even").addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
</ul>
</body>
</html>
jQuery slice () Method
The method is used to filters the set of matched elements which is specified by a range of indices is called the jQuery slice ( ) method. With the help of the following example, you will only highlight the first and second <li> elements within the <ul> element by adding the class .highlight when document is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slice() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("ul li").slice(0, 2).addClass("highlight");
});
</script>
</head>
<body>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
</ul>
</body>
</html>
- 4 years ago
- Zaid Bin Khalid
- 7346 Views
-
2