Post
Ask Question

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:

  1. .eq()

  2. .first()

  3. .last()

  4. .filter()

  5. .has()

  6. .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>
 


Similar Articles