jQuery Tutorial

How to access the odd and even matching elements in jQuery ?

Getting odd elements in jQuery

index starts from zero and zero will be considered as even elements.

odd elements

odd is used to select the odd elements from list of 'p' elements.

 $('p:odd')

even elements

even is used to select the even elements from list of 'p' elements.

 $('p:even')

Example jQuery code to access odd and even elements

<html>
   <head>
      <title>The jQuery Example - To get odd and even index elements</title>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
      $(document).ready(function(event) {
          $('p:odd').css('color', 'blue');
          $('p:even').css('color', 'red');
        });
      </script>		
   </head>	
   <body>
<p>line 0</p>
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
<p>line 5</p>
<p>line 6</p>
   </body>
</html>

Output:

loads the html documents with list of paragraph elements 'p' and highlights odd and even paragraph contents with different color.

here odd elements are highlighted with blue color and even elements are highlighted with red color.

How to highlight the odd and even columns in different colors in jQuery ?

Highlights odd columns in the table with blue colors.

 $('td:odd').css('color', 'blue');

Highlights even columns in the table with red colors.

$('td:even').css('color', 'red');

jQuery Example Code - To highlights odd and even columns in different colors in html table

<html>
   <head>
      <title>The jQuery Example - To get odd and even index elements</title>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
      $(document).ready(function(event) {
          $('td:odd').css('color', 'blue');
          $('td:even').css('color', 'red');
        });
      </script>		
   </head>	
   <body>
<table border='1' width="30%">
<tr><th>Name</th><th>City</th></tr>
<tr><td>test1</td><td>city1</td></tr>
<tr><td>test2</td><td>city2</td></tr>
<tr><td>test3</td><td>city3</td></tr>
<tr><td>test4</td><td>city4</td></tr>
<tr><td>test5</td><td>city5</td></tr>
<tr><td>test6</td><td>city6</td></tr>
</table>
   </body>
</html>

Output:

How to highlight the odd and even rows in different colors in jQuery ?

Highlights odd rows in the table with blue colors.

 $('tr:odd').css('color', 'blue');

Highlights even rows in the table with red colors.

$('tr:even').css('color', 'red');

jQuery Example Code - To highlights odd and even rows in different colors in html table

<html>
   <head>
      <title>The jQuery Example - To get odd and even index elements</title>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
      $(document).ready(function(event) {
          $('tr:odd').css('color', 'blue');
          $('tr:even').css('color', 'red');
        });
      </script>		
   </head>	
   <body>
<table border='1' width="30%">
<tr><th>Name</th><th>City</th></tr>
<tr><td>test1</td><td>city1</td></tr>
<tr><td>test2</td><td>city2</td></tr>
<tr><td>test3</td><td>city3</td></tr>
<tr><td>test4</td><td>city4</td></tr>
<tr><td>test5</td><td>city5</td></tr>
<tr><td>test6</td><td>city6</td></tr>
</table>
   </body>
</html>

Output: