CODEWITHSUNDEEP
javascriptjqueryhtml
Gaurav Sachdeva
Gaurav Sachdeva

Reputation: 75

Get value attribute from an li element

I have an unordered list with li elements in it. When I click on that particular item in the list, I want to extract the value of that li item and use it. In the example below I would want to extract the value "9".

How can I do this in jQuery?

<li sequence="1" title="Category 1" class="liEllipsis selSubCategories" value="9">
    <a href="#">
        <span class="viewIcons delFaceName _delete fl"></span>
        Category 1
    </a>
</li>

Upvotes: 1

Views: 22984

Answers (5)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly, there is no value attribute available on an li element, and adding non-standard attributes will mean that your page is invalid. Instead, use data-* attributes.

You can then hook to the click event of the a element and get that data attribute from its parent li, like this:

$('li a').click(function(e) {
  e.preventDefault();
  var value = $(this).closest('li').data('value'); // = 9
  console.log(value);

  // do something with the value here...
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li data-sequence="1" title="Category 1" class="liEllipsis selSubCategories" data-value="9">
    <a href="#">
      <span class="viewIcons delFaceName _delete fl"></span> Category 1
    </a>
  </li>
  <li data-sequence="1" title="Category 2" class="liEllipsis selSubCategories" data-value="10">
    <a href="#">
      <span class="viewIcons delFaceName _delete fl"></span> Category 2
    </a>
  </li>
</ul>

Upvotes: 6

TrickOrTreat
TrickOrTreat

Reputation: 911

Little late but this can be helpful to few. li tag does not have value attribute sewn already, but still you can use dataset feature provided. For example:

<li sequence="1" title="Category 1" class="liEllipsis selSubCategories" value="9">
    <a href="#">
        <span class="viewIcons delFaceName _delete fl"></span>
        Category 1
    </a>
</li>

To extract li's value:

$('li').click(function(){
    alert($(this).dataset.value);
})

I have been using this in vanilla javascript, should work fine for jquery as well.

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can write a click handler for li element and then get its attribute value. also value is not valid attribute for li elements. however HTML5 allows you to use custom attribute that starts with data-. you can use value attribute like data-value.

<li sequence="1" title="Category 1" class="liEllipsis selSubCategories" data-value="9">
 <a href="#">
     <span class="viewIcons delFaceName _delete fl"></span>Category 1</a>
</li>

and then get them using .data():

$('li').click(function(){
    alert($(this).data('value'));
})

Upvotes: 0

Hammad
Hammad

Reputation: 2137

li doesn't have value attribute. use data-value instead like below:

<li sequence="1" title="Category 1" class="liEllipsis selSubCategories" data-value="9">
<a href="#">
<span class="viewIcons delFaceName _delete fl"></span>Category 1</a></li>

Then use:

$('li.liEllipsis').click(function(e) {
    e.preventDefault();
    var value = $(this).attr('data-value');
});

Upvotes: 4

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Do not use value on <li>. It is not valid! Instead you can use data-value or something like that. Use this way:

$("li").click(function () {
  alert($(this).attr("value"));
});

Snippet

$(function () {
  $("li").click(function () {
    alert($(this).attr("value"));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li sequence="1" title="Category 1" class="liEllipsis selSubCategories" value="9">
  <a href="#">
    <span class="viewIcons delFaceName _delete fl"></span>Category 1</a></li>

Upvotes: 1

Related Questions