jQuery Tutorial
index starts from zero and zero will be considered as even elements.
odd is used to select the odd elements from list of 'p' elements.
$('p:odd')
even is used to select the even elements from list of 'p' elements.
$('p:even')
<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.
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');
<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:
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');
<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:
jQuery Tutorial
Privacy Policy | Copyright2020 - All Rights Reserved. | Contact us
| Report website issues in Github
| Facebook page
| Google+ page