獲取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'));
   });
});