Introduction
In this article I am going to describe various types of filters in jQuery.
Description
jQuery supports various types of filters, such as:
-
.eq()
-
.first()
-
.last()
-
.filter()
-
.has()
-
.not()
1) .eq() : Get DOM element from specified index. The indexes start from 0.
Example:
<ul>
<li>City 1</li>
<li>City 2</li>|
<li>City 3</li>
<li>City 4</li>
<li>City 5</li>
</ul>
Suppose you want to make the background red for the third element City 3. So your function is:
<script language="javascript" type="text/javascript">
$('li').eq(2).css('background-color', 'red'); </script>
Step 1 : Your .aspx page is:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="eq.aspx.cs" Inherits=
"jQueryFilter.eq" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">
<title>eq Example</title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>City 1</li>
<li>City 2</li>
<li>City 3</li>
<li>City 4</li>
<li>City 5</li>
</ul>
</div>
</form>
<script language="javascript" type="text/javascript">
$('li').eq(2).css('background-color', 'red'); // endex start from 0 </script>
</body>
</html>
Your output looks like:
![img1.jpg]()
2) .first(): Gets the first DOM element. Change your script function to:
<script language="javascript" type="text/javascript">
$('li').first().css('background-color', 'red'); // first index = 0 </script>
Your output looks like:
![img2.jpg]()
3) .last(): Get first DOM element. Change your script function to:
<script language="javascript" type="text/javascript">
$('li').last().css('background-color', 'red'); </script>
Your output looks like:
![img3.jpg]()
4) .filter(): You can filter elements by selecter or by index. If you want to make a red background for every odd element, then your function would be:
<script language="javascript" type="text/javascript">
$('li').filter(':odd').css('background-color', 'red'); //index start from 1. </script>
Your output looks like:
![img4.jpg]()
Filter with index
Example : If you want to make the first and fourth elements have a red background then your script would be:
<script language="javascript" type="text/javascript">
//index start from 0.
$('li').filter(function(index){ if(index == 1 || index == 4)
{ $(this).css('background-color', 'red'); }
});
</script>
Your output looks like:
![img5.jpg]()
5) . has() : If you want to check for some condition then the .has() function can be used.
Ex.
<ul>
<li>City 1</li>
<li><a>City 2</a></li>
<li>City 3</li>
<li>City 4</li>
<li><a>City 5</a></li>
</ul>
If you want to make the background red for only those elements containing <a></a> tags then your script would be:
<script language="javascript" type="text/javascript">
$('li').has('a').css('background-color', 'red'); //Check the <a> tag </script>
Your output looks like:
![img6.jpg]()
6) .not(): If you want to make all the odd items red then your script would look like:
<ul>
<li>City 1</li>
<li>City 2</li>
<li>City 3</li>
<li>City 4</li>
<li>City 5</li>
</ul>
<script language="javascript" type="text/javascript">
$('li').not(':even').css('background-color', 'red'); //index start from 0. </script>