Как получить значение data-id в jquery

Question

Я не нашел ответа на свой вопрос в предыдущих статьях ... поэтому я должен спросить.

У меня есть таблица с последним столбцом с кнопкой действия, тег td включает в себя идентификатор данных Ссылка выглядит следующим образом:

<td data-id="1">
    <div class="btn-group dropdown">
        <a href="javascript: void(0);" class="table-action-btn dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#"><i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
            <a class="dropdown-item history" href="#"><i class="mdi mdi-check-all mr-2 text-muted font-18 vertical-middle"></i>AC history</a>
            <a class="dropdown-item remove" href="#"><i class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Remove</a>
            <a class="dropdown-item" href="#"><i class="mdi mdi-star mr-2 font-18 text-muted vertical-middle"></i>Mark as Unread</a>
        </div>
    </div>
</td>    

Используя следующий код javascript Я пытаюсь получить атрибут data-id, когда пользователь щелкает раскрывающееся меню. Я бы хотел использовать класс в теге i ... без добавления дополнительного класса или тега

jQuery(document).ready(function() {
    $("body").on("click",".mdi-pencil",function(){

       var id = $(this).parent().parent().parent("td").data('id');

       console.log('ID is ' + id);
    });
 });

Код не работает, и я даже не могу получить отзыв на console.log в Chrome утешение. Я легко могу добавить дополнительный класс в тег href и сделать так, чтобы код работал ... но, как я уже писал выше, я бы хотел избежать дополнительных классов.

Большое спасибо за любую помощь

Answer 1

Стоит отметить, что data-id - это, в конце концов, атрибут, поэтому вы всегда можете получить данные атрибутов с помощью attr () в jQuery, Хотя, чтобы уменьшить наше кодирование и сделать его более эффективным, мы можем напрямую использовать функцию data () , как уже отвечали выше люди.

$(document).ready(function(){
  
     alert($("p").attr('data-id'));

  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p data-id = "100">paragraph </p>

Answer 2

Вы можете использовать closest() для достижения этого.

jQuery(document).ready(function() {
   $(".dropdown-item").on("click", function(){
 
   var td = $(this).closest("td");
   var id = $(td).data('id');
   console.log('ID is ' + id);
   });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td data-id="1">
    <div class="btn-group dropdown">
        <a href="javascript: void(0);" class="table-action-btn dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#"><i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
            <a class="dropdown-item history" href="#"><i class="mdi mdi-check-all mr-2 text-muted font-18 vertical-middle"></i>AC history</a>
            <a class="dropdown-item remove" href="#"><i class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Remove</a>
            <a class="dropdown-item" href="#"><i class="mdi mdi-star mr-2 font-18 text-muted vertical-middle"></i>Mark as Unread</a>
        </div>
    </div>
</td>
</table>

Answer 3

Может быть, это поможет вам:

$(document).ready(function(){
   $(".dropdown-item").on("click", function() {
     $(this).parents('td').data('id');
  });
});

Answer 4

$(this).parents('td').data('id');