javascript 从 li 元素获取 value 属性

Get value attribute from an li element

提问by Gaurav Sachdeva

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".

我有一个包含 li 元素的无序列表。当我单击列表中的特定项目时，我想提取该 li 项目的值并使用它。在下面的示例中，我想提取值“9”。

How can I do this in jQuery?

我怎样才能在 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>

回答by Rory McCrossan

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

首先，元素value上没有可用的属性li，添加非标准属性将意味着您的页面无效。相反，使用data-*属性。

You can then hook to the clickevent of the aelement and get that dataattribute from its parent li, like this:

然后，您可以挂钩元素的click事件a并data从其父级获取该属性li，如下所示：

$('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>

回答by Hammad

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

li没有 value 属性。使用 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>

Then use:

然后使用：

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

回答by Praveen Kumar Purushothaman

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

不要value在<li>. 这是无效的！相反，您可以使用data-value或类似的东西。使用这种方式：

$("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>

回答by Milind Anantwar

You can write a click handler for li element and then get its attribute value. also valueis 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 元素编写一个单击处理程序，然后获取其属性值。也不value是 li 元素的有效属性。但是 HTML5 允许您使用以data-. 您可以使用 value 属性，例如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():

然后让他们使用.data()：

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

回答by TrickOrTreat

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

有点晚了，但这可能对少数人有帮助。li 标签还没有缝制 value 属性，但您仍然可以使用dataset提供的功能。例如：

<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 的值：

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

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

我一直在 vanilla javascript 中使用它，对于 jquery 也应该可以正常工作。