时间戳

首页 > 解决方案 > 在 JQuery 中查找列表的下一个元素 data-id

javascript - 在 JQuery 中查找列表的下一个元素 data-id

问题描述

如何在单击按钮时从当前活动列表元素中获取下一个列表元素的数据 ID？

 <div class="nbrs">
    <ul>
      <li id="item1" data-id="1" class="active">Coffee (first li)</li>
      <li id="item2" data-id="2">Tea (second li)</li>
      <li id="item3" data-id="3">Green Tea (third li)</li>
    </ul>
    </div>

   <button id="btnNext" type="button">Next</button>

下一个元素 data-id 需要显示到最后一个（第三个）li。

标签： javascriptjquery

解决方案

您可以使用next()来获取下一个 li 元素并使用...读取 data-id .data('id)...参见下面的代码示例

$(function(){
  $('#btnNext').on('click', function(){
     var $next = $('ul li.active').next('li');
     if($next.length > 0) {
      var id = $next.data('id');
      alert(id);
     }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nbrs">
  <ul>
    <li id="item1" data-id="1" class="active">Coffee (first li)</li>
    <li id="item2" data-id="2">Tea (second li)</li>
    <li id="item3" data-id="3" >Tea (third li)</li>
  </ul>
</div>

<button id="btnNext" type="button">Next</button>

推荐阅读