Get first and last value of list-item (li) using jQuery

This post is about to explain a very simple trick using jQuery. This tutorial really helps you in time when you need to get the first value of list-item or last list-item.

jQuery is a brilliant way of handling DOM elements, we are going to see one of them today.

This tutorial not only teaches you how to get the first and last value of list-item, also teaches how you can get the first and last value of select option (drop-down).

Lets go to the tutorial part, First start with the HTML element:

So, there are three list-items in the above shown example. Lets see how you can take the first list-item value from it.

jQuery Part (get the first list-item):

So, Basically :first-child is the selector you can use to select the first element.

Similar to get the last list-item is :last-child. Lets see how you can write in jQuery:


Also, its similar for Drop Down too:

To get the first option value through jQuery:

To get the last option value through jQuery:


Here is an example code snippet where you can play around with it:

Examples are the best way to learn anything quickly and easily. Enjoy the day!

Related Posts

Leave a Reply