jQuery :odd() Selector Examples

It is easy to target elements that have an odd index and it can be done using the jQuery odd selector. In this article, I am going to share easy examples that show how to use the .odd() selector to highlight divs, list items, table cells, etc. Read on to find out more.

How to use the jQuery odd Selector

First, you will need to understand how indexing works and that will help you to understand more about the how the odd() selector and how it 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 odd positions, you will notice that the result is the reverse. So if there are 5 list items and you wish to highlight the 1st, 3rd and 5th list items, you will see that the 2nd and 4th 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 2 is considered as the element appearing at the odd 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>    

    <p>&nbsp;</p>    

  <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 ODD DIVs">

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

<input type="submit" name="sbt_table_cells" id="sbt_table_cells" value="Add Green Class to all ODD 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 odd position when a button is clicked

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

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

		e.preventDefault();

	});

Example 2: Highlight all list items appearing at odd position when a button is clicked

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

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

		e.preventDefault();

	});

Example 3: Highlight all table cells appearing at odd position when a button is clicked

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

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

		e.preventDefault();

	});

That’s it!

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