0
votes

Comment obtenir la valeur de l'ID de données dans jquery

Je n'ai pas trouvé de réponse à ma question dans les fils de discussion précédents ... je dois donc la demander.

J'ai un tableau avec la dernière colonne avec un bouton d'action, la balise td inclut une référence data-id comme suit :

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

En utilisant le code javascript suivant, j'essaie d'obtenir l'attribut data-id lorsque l'utilisateur clique sur le menu déroulant. J'aimerai bien utiliser la classe dans la balise i ... sans ajouter de classe ou de balise supplémentaire

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

Le code ne fonctionne pas et je ne parviens même pas à obtenir le Commentaires console.log dans la console Chrome. Je peux facilement ajouter une classe supplémentaire dans la balise a href et faire ainsi le code fonctionne ... mais comme je l'ai écrit ci-dessus, j'aimerais éviter les classes supplémentaires.

Merci beaucoup pour toute aide p>

jquery

1 commentaires

Vérifiez si la fonction est appelée au clic à l'aide du journal de la console.

4 Réponses :

-1
votes

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

1 commentaires

La question concerne data-id = "" , et non id = ""

1
votes

Vous pouvez utiliser plus proche () pour y parvenir.

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

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

1 commentaires

Merci beaucoup pour vos commentaires et conseils Phong. Bizarre ... J'ai dû modifier un peu le code car ce qui précède ne fonctionne pas ... à la place, en utilisant les exécutions suivantes sans problème ... honnêtement, je ne sais pas pourquoi: $ ("body"). On ( "click", ". dropdown-item", function () {var td = $ (this) .closest ("td"); var id = $ (td) .data ('id'); console.log (' L'ID le plus proche est '+ id);});

1
votes

Peut-être que cela vous aidera:

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

0 commentaires

1
votes

Une chose à noter est que data-id est un attribut après tout, vous pouvez donc toujours obtenir des données d'attribut avec attr () dans jQuery fort>, Bien que pour réduire notre codage et le rendre plus efficace, nous pouvons utiliser directement la fonction data () , comme les personnes ci-dessus ont répondu.

0 commentaires