jQuery provides a lot of selector functions, it also provides a lot of filter functions. This article will tell you how to use the primary jQuery filter functions with examples.
jQuery provides below filter functions. You can use them to filter out the elements that returned use the jQuery selector function.
1. eq(index_number).
The eq(index_number) function will return the Html tag object which index value is index_number. The index starts from 0.
2. hasClass(css_class_name).
Check whether the current Html element has used a special CSS class name or not. If used then return true.
3. filter(expression).
Filter out the Html element list which matches the expression value ( for example a CSS class ).
4. filter(function()).
Filter out the Html element list that matches the function return value. Below is the demo video of this example.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/360pKTuYN0I
Below Html code demo above jQuery filter functions.
eq-hasClass-filter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery EQ HasClass Filter Example</title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// If user click div html tag.
$("div").click(function () {
// If user click div element which has redDiv css class.
if($(this).hasClass('redDiv')) {
// Move red div to bottom.
$(this).animate({top:500});
// If click blue div.
}else if($(this).hasClass('blueDiv')) {
//Move blue div to left.
$(this).animate({left:10});
// If click green div.
}else if($(this).hasClass('greenDiv')) {
// Move green div to left and bottom.
$(this).animate({top:320});
$(this).animate({left:10});
}
});
});
$(function () {
// When click the first button.
$("button").eq(0).click(function () {
// Filter out the red div by class redDiv and set it's width and height value to zoom in.
$("div").filter(".redDiv").css("width", "80").css("height","80");
});
// When click the second button.
$("button").eq(1).click(function () {
// Get div object whose index value is 1, index value start from 0.
// And set it's background color to yellow.
$("div").eq(1).css("background", "yellow");
});
// When click the third button.
$("button").eq(2).click(function () {
// Get div object which contains one span tag. And set backgroud color to blue.
$("div").filter(function (index) {
return $('span', this).length == 1;
}).css("background", "blue");
});
// When click the fourth button.
$("button").eq(3).click(function () {
// Zoom out the red dive with original size.
$("div").filter(".redDiv").css("width", "180").css("height","180");
});
});
</script>
<style type="text/css">
/* Make div html element default size and position. */
div{
top:150px;
width: 180px;
height: 180px;
position: absolute;
}
/* Define red div css class. */
.redDiv{background: red;left: 10px; z-index: 1}
/* Define blue div css class. */
.blueDiv{background: blue; left: 200px;z-index: 2}
/* Define green div css class. */
.greenDiv{background: green;left: 390px; z-index: 3}
</style>
</head>
<body>
<div class="redDiv"></div>
<div class="blueDiv"><label></label></div>
<div class="greenDiv"><span></span></div>
<button style="margin-top: 10px; font-size: 15px">Zoom In First Div</button>
<br/>
<button style="margin-top: 10px; font-size: 15px">Change Second Div Color To Yellow</button>
<br/>
<button style="margin-top: 10px; font-size: 15px">Change Third Div Color To Blue</button>
<br/>
<button style="margin-top: 10px; font-size: 15px">Zoom Out First Div Size</button>
<br/>
</body>
</html>
5. has(expression).
Get specified child elements, remove other child elements.
Below is the screenshot for this example.
has.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Has If Example</title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// Get p tag object which has child label html tag with green css class name.
var greenLabel = $("p").has("label.green");
if(greenLabel)
{
alert("There has green background label. ");
greenLabel.css("background","green");
}
});
</script>
</head>
<body>
<p><label>Java</label></p>
<p><label class="green">JavaScript</label></p>
<p>C++</p>
</body>
</html>
6. map(callback_function).
Cast element list objects to the array.
Below is the screenshot for this example.
map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Map Example</title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var mapValue = $("p").map(function () {
return $(this).innerText;
});
var length = mapValue.prevObject.length;
var mapString = '';
for(var i=0;i<length;i++)
{
mapString += mapValue.prevObject[i].innerText + ", ";
}
$("#total").append(mapString);
});
</script>
</head>
<body>
<p>Java</p>
<p>JavaScript</p>
<p>C++</p>
<div id="total">Coding Language : </div>
</body>
</html>
7. not(expression).
Return Html tags that do not contain a specified expression.
8. slice(start, end).
Return a subset of the Html elements list. Do not include the end index element.
Below is the screenshot for this example.
not-slice-html.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Not Example</title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// Get all ul -> li list.
var liList = $("#navigation li");
// Remove li element that use .back css class.
var notBackLiList = liList.not(".back");
// Change the third li ( except back li ) text color to blue.
notBackLiList.slice(2,3).css("color", "blue");
// Change first li background color.
$(".back").css("background", "yellow");
});
</script>
</head>
<body>
<ul id="navigation">
<li class="back">Back</li>
<li>About</li>
<li>Contact</li>
<li>Home</li>
<li>Service</li>
</ul>
</body>
</html>
Reference
