The jQuery :gt() Selector select the elements greater than the specified index value. It applies the jquery to all the elements beyond the mentioned index.
The elements in group starts from index 0. If you specify the index value as 1, the selector selects the elements at index 2, 3,… The jQuery applies the effect(like adding color) to the all the selected elements.
The above syntax requires a single value as a index value to select the elements. If there are 5 list elements and you specify the index value as 1. The selector selects the elements 2, 3 and 4.
If you want to learn more with live examples, you can check the examples given below.
Examples of jQuery :gt() Selector
There are two examples you can learn to select the elements. The list of examples are given below to which you can click to reach the required one.
If you don’t want to click the links given above, you can also scroll down to check these examples below. Let’s start the example to select the rows of table.
Use jQuery :gt() Selector to Select Table Row Greater Than Index 1
There are three rows in the table given below. A table is a group element whose items starts from index 0. The below examples select the table rows at index greater than 1.
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:gt(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 Row</button></p> <table class="mytable"> <tr> <th>Sr. No.</th> <th>Cricketer Name</th> <th>Wicket</th> </tr> <tr> <td>1</td> <td>Sachin Tendulkar</td> <td>233*</td> </tr> <tr> <td>2</td> <td>Mahela Jaywadena</td> <td>186</td> </tr> <tr> <td>3</td> <td>Kumar Sangakkara</td> <td>124*</td> </tr> </table> |
Output
The first row starts from index 0.
| Sr. No. | Cricketer Name | Wicket |
|---|---|---|
| 1 | Sachin Tendulkar | 233* |
| 2 | Mahela Jaywadena | 186 |
| 3 | Kumar Sangakkara | 124* |
The above examples contains the table and the button. You have to click the button given above to select the table rows using jQuery :gt() Selector. It select the rows at an index 2 and 3 and applies the green color to the text content.
Select List Element Greater Than Index 1
In addition to selecting the table rows, you can also select the element of list. It select all the list item greater than the specified index. A list is also contains the group element whose items starts from index 0.
The below example select all the list element whose index is greater than 1.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $(document).ready(function(){ $('.mylibtn').click(function(){ $( "ul.mylist li:gt(1)" ).css( "color", "green" ); }); }); </script> <p>The first list item starts from index 0.</p> <p><button type="button" class="mylibtn">Click Me to Color List Items</button></p> <ul class="mylist"> <li>Welcome to our website Tutorialdeep.</li> <li>Learn jQuery with Live Examples.</li> <li>Download Codes to quickstart.</li> <li>You can learn web development also.</li> <li>Create your own website today.</li> </ul> |
Output
The first list item starts from index 0.
- Welcome to our website Tutorialdeep.
- Learn jQuery with Live Examples.
- Download Codes to quickstart.
- You can learn web development also.
- Create your own website today.
The above example contains the list elements and the button. You have to click the button to select the element greater than index 1. It applies the green color to the text of list item after selection.