javascript - 从 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-*属性。

然后您可以 Hook 到 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>