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

我的应用程序在5secs之后得到了一系列的东西。它会自动转到下一个李。 但那不是问题。问题在于click函数我想知道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'));
   });
});