如何获取我的最后一个类元素data-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 last data-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 -->

Answer 2

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

Jquery的

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

Answer 3

你可以玩这样的最后一项

    $( "ul li:last-child" ).css({ color:"red", fontSize:"80%" }) .hover(function() {
    $( this ).addClass( "solast" );
  }, function() {
    $( this ).removeClass( "solast" );
  });