Ich habe in früheren Threads keine Antwort auf meine Frage gefunden ... also muss ich fragen.

Ich habe eine Tabelle mit der neuesten Spalte mit Aktionsschaltfläche. Das td-Tag enthält eine Daten-ID-Referenz wie folgt:

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

Mit dem folgenden Javascript-Code versuche ich, das Daten-ID-Attribut abzurufen, wenn der Benutzer auf das Dropdown-Menü klickt. Ich würde gerne die Klasse in das i-Tag einfügen ... ohne eine zusätzliche Klasse oder ein zusätzliches Tag hinzuzufügen

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

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

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

Der Code funktioniert nicht und ich kann nicht einmal das Feedback zu console.log in Chrome consolle erhalten. Ich kann dem a href-Tag leicht eine zusätzliche Klasse hinzufügen, damit der Code funktioniert ... aber wie ich oben geschrieben habe, möchte ich Extras-Klassen vermeiden.

Vielen Dank für jede Hilfe

0
Federico 23 Feb. 2020 im 18:05

4 Antworten

Beste Antwort

Eine Sache, die Sie beachten sollten, ist, dass Daten-ID schließlich ein Attribut ist, sodass Sie immer Attributdaten mit attr () in jQuery abrufen können. Um unsere Codierung zu reduzieren und effizienter zu gestalten, können wir die Funktion data () direkt verwenden, wie oben angegeben.

$(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>
1
DEEPAK 23 Feb. 2020 im 18:54
$(this).parents('td').data('id');
-1
double-beep 23 Feb. 2020 im 18:15

Vielleicht hilft es dir:

$(document).ready(function(){
   $(".dropdown-item").on("click", function() {
     $(this).parents('td').data('id');
  });
});
1
sedhossein 23 Feb. 2020 im 15:34

Sie können closest() verwenden, um dies zu erreichen.

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>
1
Phong 23 Feb. 2020 im 15:26