如何始终获取最后一个.report元素的data-id值（支持动态添加）

你遇到的问题很典型——jQuery的.data()方法在匹配多个元素时，默认只会返回第一个元素对应的属性值。要获取最后一个元素的data-id，只需要调整选择器，精准定位到最后一个.report元素即可。

修改后的代码 #

$( document ).ready(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 200){
      // 使用:last选择器定位最后一个.report元素
      var variable = $('.report:last').data("id");
      alert(variable);
    }
  });
});

为什么这样改？ #

• $('.report:last')会选中DOM中所有.report元素里的最后一个，哪怕后续动态添加了新的.report元素，每次滚动触发时都会重新查询DOM，所以总能拿到最新的最后一个元素的data-id。
• 你也可以用.eq(-1)来实现同样的效果，写法是$('.report').eq(-1).data("id")，eq(-1)同样表示选择匹配集合中的最后一个元素，两种方式都能满足需求。

验证用的HTML示例 #

<li class="report" data-id="602532">Report inappropriate</li>
<li class="report" data-id="602530">Report inappropriate</li>
<li class="report" data-id="602529">Report inappropriate</li>
<li class="report" data-id="602531">Report inappropriate</li>
<li class="report" data-id="602575">Report inappropriate</li>
<li class="report" data-id="602557">Report inappropriate</li>
<li class="report" data-id="602574">Report inappropriate</li>

这样修改后，每次滚动到指定位置时，弹窗都会显示最后一个.report元素的data-id值，哪怕后续动态添加新元素也能正常获取。

内容的提问来源于stack exchange，提问作者RGS