Description
jQuery Filtering is removing unwanted elements and applying the effects to only required terms. jQuery has many methods like filter(), first(), last(), eq(), slice(), has(), not(), etc. which helps to reduce searching elements in a DOM tree.
Description
The method first() method filters sets of matched elements and returns the initial element from the set or a group. The following example will only highlight the first <li> element within the <ul> element by adding the class "highlight" on document ready.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery first() Demo</title>
<style type="text/css">
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(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>
[/html]
Output:
The last() method filters the set of matched elements and returns the final element from the set.
Description
The method eq() method filters the set of matched elements and returns only one element with a specified index number. The following example will highlight the second <li> element within the <ul> element by adding the class "highlight" on document ready.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery eq() Demo</title>
<style type="text/css">
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(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>
[/html]
Output:
Description
jquery Filtering filter() method has the arguments with functions or the selectors, the set of matched elements depending on a particular criteria. The supplied selector or function to the filter() method is examined against every element in the group of matched elements and all the elements that matching the supplied selector or pass the function's test will be included in the result.
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery filter() Demo</title>
<style type="text/css">
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(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>
[/html]
Output:
Key Points
jQuery Filtering draws out following main points.
- filter(), first(), last(), eq(), slice(), has(), not() reduces DOM tree structure.