javascript - 如何找到具有特定类的最后一个元素

Question

我有以下 HTML

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

我的意图是得到最后一个 <li>的图data-id .

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

我如何获得 productCategory__ul__li最后data-id ？

我不想使用 productCategory-ul找到我的最后li , 我想用 $each或使用 productCategory__ul__li找到它。

Answer 1

您可以使用 :last 选择器(或 last() 方法)检索匹配集中的最后一个元素:

var id = $('.productCategory__ul__li:last').data('id');
   // or $('.productCategory__ul__li').last().data('id');

var id = $('.productCategory__ul__li:last').data('id');
console.log(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 class="productCategory__ul__li" data-id="1">id = 1</figure>
  </li>
  <li>
    <figure class="productCategory__ul__li" data-id="2">id = 2</figure>
  </li>
  <li>
    <figure class="productCategory__ul__li" data-id="3">id = 3</figure>
  </li>
  <li>
    <figure class="productCategory__ul__li" data-id="4">id = 4</figure>
  </li>
</ul>