Main Tutorials

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>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
2 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
John
10 years ago

i just used the filter function on here for a widget i’m working on. Can’t thank you enough for posting this!!!

GeorgiRG
8 years ago

Thank you very much for this article.
GOD bless you and keep you :).