The jQuery :odd selector selects the odd items from the group element. The group element can be a table, list, or any other HTML element. After selecting the items, you can apply the CSS using jQuery.
The syntax of the selector is given below.
You can use the selector with the HTML tag name. To do this, you have to place the tag name or class name element before the selector. For example: if you have to select the table in a webpage, you have to use the selector as $("table:odd").
Let’s make it more clear with the examples given below.
jQuery :odd Selector to Select Odd Rows of a Table
The rows of a table element start with an index 0. The jQuery :odd selector in the example below selects the odd rows present at 1, 3, 5, and so on. We are using the button in the example below to apply the CSS on click using jQuery.
See the example below to learn the way of using the selector in jQuery.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table.mytable tr:odd" ).css( "color", "red" ); }); }); </script> <style> .mytable{ border-collapse:collapse; } .mytable tr th, .mytable tr td{ border: 1px solid #ccc; } </style> <p><button type="button" class="mybtn">Click Me to Color Odd Rows</button></p> <table class="mytable"> <tr> <th>Sr No</th> <th>Tennis Player Name</th> <th>Score</th> </tr> <tr> <td>1</td> <td>Roger Federer</td> <td>19</td> </tr> <tr> <td>2</td> <td>Andy Murray</td> <td>12</td> </tr> <tr> <td>3</td> <td>Serena Williams</td> <td>23</td> </tr> <tr> <td>4</td> <td>Nick Kyrgois</td> <td>14</td> </tr> <tr> <td>5</td> <td>Darla Kasatkina</td> <td>11</td> </tr> </table> |
Output
| Sr No | Tennis Player Name | Score |
|---|---|---|
| 1 | Roger Federer | 19 |
| 2 | Andy Murray | 12 |
| 3 | Serena Williams | 23 |
| 4 | Nick Kyrgois | 14 |
| 5 | Darla Kasatkina | 11 |
The above example contains the table and the button element. There are six rows in the above table including the row containing the heading.
Click the button in the above example to apply the CSS to the odd rows of a table. It applies the red color to the rows having index 1, 3.
Select Odd Items From List Element
Let’s use the list element and select the odd items with jQuery :odd selector. It applies the CSS color to the selected list items when you click the button given below. The items of the list element start from an index 0. If you want to select the odd items, you have to select the list items located at index 1, 3, 5, and so on.
See the example below to perform this task.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('.mylibtn').click(function(){ $( "ul.mylist li:odd" ).css( "color", "orange" ); }); }); </script> <button type="button" class="mylibtn">Click Me to Color Odd List Items</button> <ul class="mylist"> <li>Learn from simple live examples.</li> <li>Create a jQuery effect easily after learning from Tutorialdeep.</li> <li>Color odd items of a list using this example.</li> <li>Click the button to apply a color to the items</li> <li>Select required items from list element in a webpage using jQuery.</li> </ul> |
Output
- Learn from simple live examples.
- Create a jQuery effect easily after learning from Tutorialdeep.
- Color odd items of a list using this example.
- Click the button to apply a color to the items
- Select required items from list element in a webpage using jQuery.
The above example contains the five list items and the button. If you want to apply the CSS color to the odd item then click the button given above. The selected list items are at index 1 and 3. The above example applies the ‘orange’ color only to these selected list items.