Filter in jQuery

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:

Suppose you want to make the background red for the third element City 3. So your function is:

        $('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:

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:

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:

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:


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:

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:

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>