Filtering elements in jQuery is very vital. We may come across many requirements when we need to filter HTML Elements or jQuery object to a subset of element on different set of criteria. We may have to filter on basis of
- Some selection criteria
- On basis of HTML elements name
- On basis of callback function
To ease our task jQuery provides sets of filtering functions. Some of the functions are as following,
Let us explore each function one by one.
.eq(index)
This returns list of elements matching the set criteria. We apply .eq on jQuery object. For example .eq can be applied on elements like <li>, <tr>, < div> etc. on basis of index it filters the jQuery object and returns set of matching elements as a new single jQuery object. To understand it better let us take an example. Assume we have following HTML
And we need to select Item5. We need to change background and color of this element. We can perform this in two steps.
Step1: Select <li> element and convert it to jQuery object
Step2: Apply filter to fetch required element and apply desired CSS
We can select Item5 either by class name or using tag name. In both case we will have to apply filter using .eq.
In above code both filters will be returning same element [5th element in< li>]. We are passing index as 4 when selecting element by tag. Since there are five <li> elements and index starts from 0, so we need to pass 4 as index in first case. However when we are selecting element as class name then we are passing index 2 since there are only 3 elements exist with same class name.
Complete example of above discussion is given below.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<body>
<p>This is Test page for Filter in jQuery</p>
<ul>
<li class='toselect'>Item 1</li>
<li>Item 2</li>
<li class='toselect'>Item 3</li>
<li>Item 4</li>
<li class='toselect'>Item 5 will be selected</li>
</ul>
</body>
<script type="text/javascript">
$('document').ready(function () {
alert('hello');
$('li').eq(4).css('color', 'red');
$('.toselect').eq(2).css('background-color', 'blue');
});
</script>
</html>
When we run above code, we should be getting output as following,
.first
We apply .first on jQuery object {essentially can be HTML elements} and it returns first matching element as jQuery object. Let us take the same example we took earlier for .eq. if we want color of first <li> element to be changed then we can change that as following,
.first also works in same way of .eq. We need to select element then convert that to jQuery object and finally apply .first to fetch first element as jQuery object.
Complete example of above discussion is as following,
Example 2
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<body>
<p>This is Test page for Filter in jQuery</p>
<ul>
<li class='toselect'>Item 1</li>
<li>Item 2</li>
<li class='toselect'>Item 3</li>
<li>Item 4</li>
<li class='toselect'>Item 5 will be selected</li>
</ul>
</body>
<script type="text/javascript">
$('document').ready(function () {
$('li').first().css('color', 'red');
});
</script>
</html>
We will be getting expected output as following,
![clip_image001[6]](https://dhananjay25.files.wordpress.com/2012/06/clip_image0016_thumb.png?w=243&h=140 "clip_image001[6]")
.last
We apply .last on jQuery object {essentially can be HTML elements} and it returns last matching element as jQuery object. Let us take the same example we took earlier for .eq. if we want color of last <li> element to be changed then we can change that as following,
.last also works in same way of .eq. We need to select element then convert that to jQuery object and finally apply .last to fetch last element as jQuery object.
Complete example of above discussion is as following,
Example 3
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<body>
<p>This is Test page for Filter in jQuery</p>
<ul>
<li class='toselect'>Item 1</li>
<li>Item 2</li>
<li class='toselect'>Item 3</li>
<li>Item 4</li>
<li class='toselect'>Item 5 will be selected</li>
</ul>
</body>
<script type="text/javascript">
$('document').ready(function () {
$('li').last().css('color', 'red');
});
</script>
</html>
We will be getting expected output as following,
![clip_image001[8]](https://dhananjay25.files.wordpress.com/2012/06/clip_image0018_thumb.png?w=303&h=175 "clip_image001[8]")
.has()
We apply .has on jQuery object {essentially can be HTML elements} and it returns jQuery object from set of matching elements.
.has can take two types of input parameter. It can take either selector as string or HTML DOM Element. Given element will be matched and jQuery object will be returned from matched subset DOM elements.
For example consider following HTML
If we want to change background of div contains <ul> then in this scenario we can use has. We will select <div> has <ul> as following,
Complete example of above discussion is as following,
Example 4
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<body>
<p>This is Test page for Filter in jQuery</p>
<ul>
<li class='toselect'>Item 1</li>
<li>Item 2</li>
<li class='toselect'>
Item 3
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
<li>Item 4</li>
<li class='toselect'>Item 5 will be selected1</li>
</ul>
<div>
<ul>
<li>p1</li>
<li>p2</li>
</ul>
</div>
<div>
<p>
This DIV is just like that
</p>
</div>
</body>
<script type="text/javascript">
$('document').ready(function () {
$('li').has('ul').css('color', 'red');
$('div').has('ul').css('background-color', 'blue');
});
</script>
</html>
We will be getting expected output as following,
![clip_image001[10]](https://dhananjay25.files.wordpress.com/2012/06/clip_image00110_thumb.png?w=342&h=315 "clip_image001[10]")
.map
We use .map to iterate through a jQuery object and apply a function on each element. .map is useful when we want to get or set values on collection of elements. For example we want to fetch values of all the input elements. .map returns array as output.
Let us suppose we want to fetch value of all <li> as comma separated from following HTML
We will apply .map function to <li> to fetch all the value as array and then we will apply joins on array to make values as comma separated.
Complete example of above discussion is as following,
Example 5
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<body>
<p>This is Test page for Filter in jQuery</p>
<ul>
<li class='toselect'>Item 1</li>
<li>Item 2</li>
<li class='toselect'>Item 3</li>
<li>Item 4</li>
<li class='toselect'>Item 5 will be selected</li>
</ul>
</body>
<script type="text/javascript">
$('document').ready(function () {
var r = $('li').map(function () {
return $(this).text();
}).get().join(',');
alert(r);
});
</script>
</html>
We will be getting expected output as following,
![clip_image001[12]](https://dhananjay25.files.wordpress.com/2012/06/clip_image00112_thumb.png?w=362&h=127 "clip_image001[12]")
.not
We apply .not on a jQuery object to fetch elements which does not match the selector. .not can take four different types of input
- Selector
- jQuery object
- Elements
- Function
As an output it returns jQuery object.
Let us consider following HTML and we want to change background color of all the odd <li> elements.
We can change that as following,
Complete example of above discussion is as following,
Example 6
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<body>
<p>This is Test page for Filter in jQuery</p>
<ul>
<li class='toselect'>Item 1</li>
<li>Item 2</li>
<li class='toselect'>Item 3</li>
<li>Item 4</li>
<li class='toselect'>Item 5 will be selected</li>
</ul>
</body>
<script type="text/javascript">
$('document').ready(function () {
$('li').not(':even').css('background-color', 'red');
});
</script>
</html>
We will be getting expected output as following,
![clip_image001[14]](https://dhananjay25.files.wordpress.com/2012/06/clip_image00114_thumb.png?w=345&h=174 "clip_image001[14]")
.slice
.slice can be applied on a jQuery object. It returns subset of elements as jQuery object on basis of specified criteria. We pass index of first element and last element of the returned subset. If index of last element is not specified then .slice will return all the elements from index of start element.
Consider following HTML and we want to change background color of all the <li> after second element
We can change background color using .slice as following,
Complete example of above discussion is as following,
Example 7
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
<body>
<p>This is Test page for Filter in jQuery</p>
<ul>
<li class='toselect'>Item 1</li>
<li>Item 2</li>
<li class='toselect'>Item 3</li>
<li>Item 4</li>
<li class='toselect'>Item 5 will be selected</li>
</ul>
</body>
<script type="text/javascript">
$('document').ready(function () {
$('li').slice(2).css('background-color', 'red');
});
</script>
</html>
We will get expected output as following,
![clip_image001[16]](https://dhananjay25.files.wordpress.com/2012/06/clip_image00116_thumb.png?w=370&h=192 "clip_image001[16]")
Conclusion
These are the jQuery functions we may be using to filter. Sometime we may have to apply more than one function together to filter to a specific subset of elements. I hope this post is useful. Thanks for reading.
![clip_image001[6]](https://dhananjay25.files.wordpress.com/2012/06/clip_image0016.png "clip_image001[6]")
![clip_image001[8]](https://dhananjay25.files.wordpress.com/2012/06/clip_image0018.png "clip_image001[8]")
![clip_image001[10]](https://dhananjay25.files.wordpress.com/2012/06/clip_image00110.png "clip_image001[10]")
![clip_image001[12]](https://dhananjay25.files.wordpress.com/2012/06/clip_image00112.png "clip_image001[12]")
![clip_image001[14]](https://dhananjay25.files.wordpress.com/2012/06/clip_image00114.png "clip_image001[14]")
![clip_image001[16]](https://dhananjay25.files.wordpress.com/2012/06/clip_image00116.png "clip_image001[16]")
