jQuery filter() example
jQuery filter function is a useful feature to extract your elements from a set of the matched elements, by using the matched selector or the function’s test.
1. filter(selector)
In a set of matched elements, get the elements that are match the filter() selector only.
For example,
$("div").filter("#div1").css('background-color', 'blue');
Matched all the div elements, and select the div elements which contains id of “div1”, and change the element’s background color to blue.
2. filter(function)
In a set of matched elements, get the elements that are pass the function’s test. The function pass an index parameter inside, which represent the index of the matched elements, starting count from 0.
For example,
$('div').filter(function(index) {
if(index==2 || index==3){ //0 index based
return true;
}
}).css('background-color', 'blue');
Matched all the div elements, filter with function to select only the third(2) and fourth(3) div elements.
$('div').filter(function(index) {
return $("b", this).length == 1;
}).css('background-color', 'blue');
Matched all the div elements, filter with function to select the div element which contains <b> tag.
jQuery filter() example
<html>
<head>
<title>jQuery filter example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery filter example</h1>
<script type="text/javascript">
$(document).ready(function(){
$("#filterSelector").click(function () {
$('div').css('background-color', 'white');
$("div").filter("#div1").css('background-color', 'blue');
});
$("#filterFunction").click(function () {
$('div').css('background-color', 'white');
$('div').filter(function(index) {
if(index==2 || index==3){ //0 index based
return true;
}
}).css('background-color', 'blue');
});
$("#filterFunction2").click(function () {
$('div').css('background-color', 'white');
$('div').filter(function(index) {
return $("b", this).length == 1;
}).css('background-color', 'blue');
});
});
</script>
</head><body>
<div id="div1">
<b>This is div 1 with 'b' tag</b>
</div>
<div id="div2">
This is div 2
</div>
<div id="div3">
<b>This is div 3 with 'b' tag</b>
</div>
<div id="div4">
This is div 4
</div>
<br/>
<br/>
<br/>
<input type='button' value='filter(selector)' id='filterSelector'>
<input type='button' value='filter(index)' id='filterFunction'>
<input type='button' value='filter(index)+b' id='filterFunction2'>
</body>
</html>
i just used the filter function on here for a widget i’m working on. Can’t thank you enough for posting this!!!
Thank you very much for this article.
GOD bless you and keep you :).