jQuery :eq() Selector Examples

Ever wanted to select an element using a specific index number but wondered how to do it? If yes, then the jQuery eq selector is right for you. In this article, I am going to share easy examples that show how to use the :eq() selector in real time.

How to use the jQuery eq Selector

As I already mentioned, the :eq() selector selects an element with a specific index number and the index numbers start at 0. Because of this reason, the first element will have the index number 0. The second element will have an index of 1, the third will have an index of 2 and so on. For the sake of the example, let’s assume that we have few elements in a web page such as a div, list item, etc.

Common HTML source code for all following examples:

<style type="text/css">
.existing_yellow {
	background-color: #FFFF99;
	border: 1px solid #FF0;
}
.existing_purple {
	background-color: #9999FF;
	border: 1px solid #90F;
}
.green {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
.blue {
	background-color: #E1F3FF;
	border: 1px solid #09F;
}
.red_text {
	color: #D70000;
	font-weight: bold;
}
.orange {	
	border: 10px solid #F90;
	color: #FFF;
	font-size: 200%;
	font-weight:bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;	
}
</style>

<div class="divs_container">

	<div id="my_div1">This is MY DIV 1

   	  <div id="my_div2" class="existing_yellow red_text">This is MY DIV 2</div>

    </div>

  <div id="my_div3" class="existing_purple">This is MY DIV 3</div>    

    <div id="my_div4" class="existing_yellow">This is MY DIV 4</div>    

  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
  	</ul>

  <table width="100%" border="1" cellspacing="1" cellpadding="1">
      <tr>
        <td>R1C1</td>
        <td>R1C2</td>
        <td>R1C3</td>
        <td>R1C4</td>
      </tr>
      <tr>
        <td>R2C1</td>
        <td>R2C2</td>
        <td>R2C3</td>
        <td>R2C4</td>
      </tr>
      <tr>
        <td>R3C1</td>
        <td>R3C2</td>
        <td>R3C3</td>
        <td>R3C4</td>
      </tr>
      <tr>
        <td>R4C1</td>
        <td>R4C2</td>
        <td>R4C3</td>
        <td>R4C4</td>
      </tr>
  </table>
</div>

<p>	
<input type="submit" name="sbt_div_index" id="sbt_div_index" value="Add Green class to DIV with 1 as index">

<input type="submit" name="sbt_list_index" id="sbt_list_index" value="Add Green class to List Item with 4 as index">

<input type="submit" name="sbt_table_cells" id="sbt_table_cells" value="Add Green Class to Table Cells with 3, 4 and 7 index">

<br>

<input type="button" name="sbt_reset" id="sbt_reset" value="Reset everything">
</p>

<script type="text/javascript" language="javascript" >

$(document).ready(function(){

//Put all jQuery code here

});	

</script>

Example 1: Using :eq() selector to target a specific div and change it’s color

	$('#sbt_div_index').on("click", function(e){		

		$('.divs_container div:eq(1)').addClass('green');

		e.preventDefault();

	});

Example 2: Using :eq() selector to target a specific list item and change it’s color

	$('#sbt_list_index').on("click", function(e){		

		$('.divs_container ul li:eq(4)').addClass('green');

		e.preventDefault();

	});

Example 3: Using :eq() selector to target a specific cell (nth child)  of a table and change it’s color

	$('#sbt_table_cells').on("click", function(e){				

		$('.divs_container table td:eq(3), .divs_container table td:eq(4), .divs_container table td:eq(7)').addClass('green');

		e.preventDefault();

	});

Simple, isn’t it?

Do you know of any other ways of using the jQuery eq selector? Please feel free to suggest by commenting below.