获取li元素内的anchor元素的data-id

Question

HTML

 <ul> <li> <a href="" data-id="1" onclick="clickFunction();"></a> </li> <li> <a href="" data-id="2" onclick="clickFunction();"></a> </li> <li> <a href="" data-id="3" onclick="clickFunction();"></a> </li> <li> <a href="" data-id="4" onclick="clickFunction();"></a> </li> <li> <a href="" data-id="5" onclick="clickFunction();"></a> </li> </ul> 

5秒后，我的应用程序便得到了一份清单。 它会自动转到下一个li。 但这不是问题。 问题是单击功能，我想知道li的数据ID。

Answer 1

根据OP的评论

• 删除onclick attribute 。
• 使用jQuery绑定click事件。
• 使用closest('li')获取链接的父级。

 function clickFunction(e) { e.preventDefault(); // This is to prevent the execution of your links! console.log($(this).closest('li').data('id')); } $('a').click(clickFunction); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li data-id="1"> <a href="">1</a> </li> <li data-id="2"> <a href="">2</a> </li> <li data-id="3"> <a href="">3</a> </li> <li data-id="4"> <a href="">4</a> </li> <li data-id="5"> <a href="">5</a> </li> </ul> 

Answer 2

（1）删除onclick属性。

（2）将.click处理程序附加到所有链接

$(function () {
    // attach an onclick event handler to your links
    $('li a[data-id]').click(function (e) {
      // prevent the link from going anywhere
      e.preventDefault();
      // get the parent li
      var li = $(this).closest('li');
      // get next li's link data id
      console.log(li.next('li').find('a').data('id'));
   });
});