The jQuery :last selector selects the last element in a group. If you want to apply jQuery to the last element, you have to use this selector.
You don’t have to use any value to add to the selector. It required only the simple syntax to use as given below.
The above syntax can be used with the tag name to select the required tag. Let’s let it be more clear with the examples given below.
Examples of jQuery :last Selector
There are two examples listed below to explain the use of the jQuery :last Selector.
Let’s start with the example of using the table and selecting the last table row.
Use jQuery :last Selector to Select the Last Row of a Table
The below example selects the last row of the table and applies the color to it. There are three table rows and each row contains the text content.
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 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( "table.mytable tr:last" ).css( "color", "orange" ); }); }); </script> <style> .mytable{ border-collapse:collapse; } .mytable tr th, .mytable tr td{ border: 1px solid #ccc; padding:10px; } </style> <p><button type="button" class="mybtn">Click Me to Color Last Row</button></p> <table class="mytable"> <tr> <th>Sr. No.</th> <th>Cricketer Name</th> <th>Wicket</th> </tr> <tr> <td>1</td> <td>Virat Kohli</td> <td>189*</td> </tr> <tr> <td>2</td> <td>Ravindar Jadeja</td> <td>134</td> </tr> <tr> <td>3</td> <td>Shikhar Dhawan</td> <td>123*</td> </tr> </table> |
Output
| Sr. No. | Cricketer Name | Wicket |
|---|---|---|
| 1 | Virat Kohli | 189* |
| 2 | Ravindar Jadeja | 134 |
| 3 | Shikhar Dhawan | 123* |
The above example contains the button and the table. When you click the button, the selector selects the last row and apply the ‘orange’ color to the text content.
Select Last List Item
Let’s take an example of the list element and apply the CSS to the last list item. You have to use the jQuery :last selector as the example given below. It contains the five elements and applies the jQuery effect to the last element.
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:last" ).css( "color", "orange" ); }); }); </script> <p><button type="button" class="mylibtn">Click Me to Color Last List Item</button></p> <ul class="mylist"> <li>Select last list item.</li> <li>Apply color to the last list item.</li> <li>Learn jQuery from the website Tutorialdeep.</li> <li>Create your own website with our web development guide.</li> <li>Use live examples to learn everything.</li> </ul> |
Output
- Select last list item.
- Apply color to the last list item.
- Learn jQuery from the website Tutorialdeep.
- Create your own website with our web development guide.
- Use live examples to learn everything.
The above example contains the list elements and the button. Click the button given above to apply the ‘orange’ color to the last list item. It happens because of the selector you are using to select only the end element in a group.