jQuery :even() Selector Examples

If you wish to target the elements that have an even index, it is possible to do so by using the jQuery even selector. In this article, I am going to share easy examples that show how to highlight divs, list items, table cells, etc. using the :even() selector. Read on to find out more.

How to use the jQuery even Selector

Before we look at the examples, you will need to understand how indexing works and how the :even() selector works. By default, indexing starts at 0. And 0 is considered as an even number, so when you target specific type elements with the intent of targeting the elements appearing at the even positions, you will notice that the result is the reverse. So if there are 5 list items and you wish to highlight the 2nd and 4th list items, you will see that the 1st, 3rd and 5th list items will be highlighted. Here’s how it would work internally:

• List Item 1 – Index 0
• List Item 2 – Index 1
• List Item 3 – Index 2
• List Item 4 – Index 3
• List Item 5 – Index 4

Just take a look at the index. Because the index starts at 0, the List Item 1 is considered as the element appearing at even position and hence it will be highlighted. And every alternate element will be highlighted from there on. That said, let’s see how this works in real time.

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 all EVEN DIVs">

<input type="submit" name="sbt_list_index" id="sbt_list_index" value="Add Green class to all EVEN List Items">

<input type="submit" name="sbt_table_cells" id="sbt_table_cells" value="Add Green Class to all EVEN Table Cells">

<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: Highlight all divs appearing at even position when a button is clicked using the :even() selector

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

		$('.divs_container div:even').addClass('green');

		e.preventDefault();

	});

Example 2: Highlight all list items appearing at even position when a button is clicked using the :even() selector

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

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

		e.preventDefault();

	});

Example 3: Highlight all table cells appearing at even position when a button is clicked using the :even() selector

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

		$('.divs_container table td:even').addClass('green');

		e.preventDefault();

	});

That’s it!

Do you know of any other ways to use the jQuery :even() selector? Feel free to suggest by commenting below.