从li元素获取值属性

Question

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

如何在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>

Answer 1

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

然后，您可以挂钩到元素的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>