How to get attribute value of list item using JQuery

By Posted on

This is an article which is written to specifically retrieve or to discuss on how to get attribute value of list item using JQuery. As we already knew in an HTML based web page, there are lots of HTML elements where one of them is List Item. It is symbolized or it is represented with a specific tag named “<li”>. It is declared or written inside another HTML elements whether “<ol”> represented for an Ordered List HTML element or an “<ul>” which is a tag represented for an Unordered List HTML element.

So, in order to explain how to get an attribute value possessed by a list item HTML element inside an ordered list HTML element or unordered list HTML element there is a specific way to get using JQuery below is an example for doing it with a specific way or scenario. Just do the following step to try to achieve it :

1. Just define the list item HTML element in the HTML web page as shown below to try to simulate on how to get the attribute value of a list item HTML element : 

<div>
<ul id="list_selection_sample">
<li value="PostgreSQL">PostgreSQL</li>
</ul>
</div>id="div_selection_sample"

2. In the above definition of list item HTML element, there is a list item declared inside the unordered list where the list item itself has an attribute named value. The attribute named value itself has a value which is “PostgreSQL”. The most important thing which is used as a reference so that the attribute value’s value can be retrieved. In this context, the reference is attached to the unordered list represented with “<ul>” tag. The reference is stated in attribute named id with the value of “list_selection_sample”.

  1. So, the last step is defining the snippet code which is actually a JQuery snippet code used to get the value of the list item if that list item is being clicked. Below is the snippet code mentioned :
var list = $("#list_selection_sample");
list.on('click','li', function() {
         value = $(this).attr('value');                                           
         alert(value);                           
});

As shown in the above snippet code, it can be recognized that in order to add a list item, first of all, get the unordered list acts as a container for the list item. The unordered list HTML element is referred with an id named ‘list_selection_sample’. Below is the line of the script aim to achieve that : 

var list = $("#list_selection_sample");

The next one which is the important part is for getting the attribute named value of the list item contained in the unordered list HTML named referred with the id of ‘list_selection_sample’ when the list item itself is being clicked. That is represented with the following line of code : 

list.on('click','li', function() {
         value = $(this).attr('value');                                                                  
});

The last one is for showing the value of the value attribute from the clicked list item in the form of pop-up window. It is shown as the following snippet code : 

alert(value);

Leave a Reply