The jQuery :eq() selector selects the group elements at index n. Each group element starts with an index value 0. If you specify the value as index zero(0), it means you are selecting the first element from the group.
After selecting the required element, you can apply CSS or any other jQuery effect. The syntax of the selector is given below.
You have to specify the tag name before the selector to select the required element.
Parameter Description
| Sr. No. | Parameter Name | Description |
|---|---|---|
| 1 | n | It is the item index value of the group element which starts from zero(0). For example, the index of first list item is starts from index zero(0). |
If you have to select the list element, you have to use the li tag before the selector. Let it be more clear with the examples given below.
Examples of jQuery :eq() Selector
There are two examples given below for this selector. The first example is using the table and the second using the list items. You have to click the below example link to jump to the example with its explanation.
Let’s start the example of selecting the required index of the table row.
Use jQuery :eq() Selector to Select Table Row at Index n
The below example selects the table row at an index 1 using the jQuery :eq() selector. As you know that all the group elements start with an index 0. Which means it selects the second row from the below-given table.
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 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table.mytable tr:eq(1)" ).css( "color", "green" ); }); }); </script> <style> .mytable{ border-collapse:collapse; } .mytable tr th, .mytable tr td{ border: 1px solid #ccc; padding:10px; } </style> <p>The first row starts from index 0.</p> <p><button type="button" class="mybtn">Click Me to Color Second Row</button></p> <table class="mytable"> <tr> <th>Sr. No.</th> <th>Cricketer Name</th> <th>Wicket</th> </tr> <tr> <td>1</td> <td>Mohd Sami</td> <td>3</td> </tr> <tr> <td>2</td> <td>Jasprit Bumrah</td> <td>6</td> </tr> <tr> <td>3</td> <td>Kagiso Rabada</td> <td>4</td> </tr> </table> |
Output
The first row starts from index 0.
| Sr. No. | Cricketer Name | Wicket |
|---|---|---|
| 1 | Mohd Sami | 3 |
| 2 | Jasprit Bumrah | 6 |
| 3 | Kagiso Rabada | 4 |
When you click the button given above, it selects the second row of the table and applies the green color. Similarly, you can apply many other jQuery effects after selecting the required element.
Select List Element at Index n
You can use the jQuery :eq() selector to select the list element at a specified index. The below-given example contains the list of elements from which you have to select the third element.
As you know, the group elements start with index zero(0). So, you have to specify 2 as the index value to select the third list item given below.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $('.mylibtn').click(function(){ $( "ul.mylist li:eq(2)" ).css( "color", "green" ); }); }); </script> <p>The first list item starts from index 0.</p> <p><button type="button" class="mylibtn">Click Me to Color Second Index</button></p> <ul class="mylist"> <li>First list item with index 0.</li> <li>Second List item with index 1.</li> <li>Third list item with index 2.</li> </ul> |
Output
The first list item starts from index 0.
- First list item with index 0.
- Second List item with index 1.
- Third list item with index 2.
Click the button given above to select the third list item. After selecting the item, the jQuery applies the green color to the text.