jquery - 如何获取我的最后一个类元素数据 ID？

Question

html

<ul id="productCategory-ul" class="productCategory__ul">
<li></figure data-id="1"></figure></li>
<li></figure data-id="2"></figure></li>
<li></figure data-id="3"></figure></li>
<li></figure data-id="4"></figure></li>
</ul><!-- end of brandContent__ul -->

我的目的是获取最后一个数字 li data-id ，但我尝试了一些代码，但它不起作用。

<li></figure data-id="4"></figure></li>

我的代码

1.

var lastProductItem  = $("#productCategory-ul li figure:last-child").attr("data-id");

2.

var lastProductItem = $("#productCategory-ul  > li figure:last-child").data("id");

那么我如何获取我的productCategory-ul最后的数据ID？

Answer 1

首先更正HTML

<li><figure data-id="4"></figure></li>

而不是

<li></figure data-id="4"></figure></li>

当您打算定位最后一个 li 元素时，请对其使用 :last-child 选择器。然后你可以得到后代figure，之后id可以被获取。

var lastProductItem = $("#productCategory-ul  li:last-child figure").data("id");

console.log($("#productCategory-ul  li:last-child figure").data("id"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="productCategory-ul" class="productCategory__ul">
  <li>
    <figure data-id="1">1</figure>
  </li>
  <li>
    <figure data-id="2">2</figure>
  </li>
  <li>
    <figure data-id="3">3</figure>
  </li>
  <li>
    <figure data-id="4">4</figure>
  </li>
</ul>
<!-- end of brandContent__ul -->