2011-03-29 1 views
36

Salut Stackoverflow Communauté,jquery: id obtenir du sélecteur de classe

difficile à expliquer, mais ...

est-il possible que je peux obtenir l'identifiant d'un élément de quelque chose comme

<a href="#" class="test" id="test_1">Some text</a> 
<a href="#" class="test" id="test_2">Some text</a> 
<a href="#" class="test" id="test_3">Some text</a> 

puis je lie

$ ('test')

alors quand je clique sur l'un des éléments, je récupère l'identifiant? Faites-moi savoir si je dois expliquer plus loin.

Merci beaucoup à l'avance.

Répondre

71

Doh .. Si je vous ai droit, il devrait être aussi simple que:

$('.test').click(function() { 
    alert(this.id); 
}); 

Vous pouvez juste accès la propriété id sur le noeud dom underlaying , dans le gestionnaire d'événements .

+1

PS: J'ai également combiné .each et résolu mon problème :) –

34

Utilisez la méthode "attr" dans jquery.

$('.test').click(function(){ 
    var id = $(this).attr('id'); 
}); 
+1

La question sous-jacente: Une fois que vous avez 'this', vous n'avez pas vraiment besoin de' id', en supposant que l'OP essaie de trouver l'élément par son ID, plutôt que l'ID par l'élément ... – Kobi

+0

droite. Cependant, il peut vouloir afficher le nom de l'ID. – benck

+0

Je suis d'accord avec les deux, tout dépend de votre tâche particulière! :) –

6

Lorsque vous ajoutez un événement de clic, this renvoie l'élément qui a été cliqué. Donc, vous pouvez simplement utiliser this.id;

$(".test").click(function(){ 
    alert(this.id); 
}); 

Exemple: http://jsfiddle.net/jonathon/rfbrp/

2
$(".class").click(function(){ 
    alert($(this).attr('id')); 
}); 

uniquement sur le bouton jquery cliquez que nous pouvons faire cette classe doit être écrit il

2

À partir de jQuery 1.6, vous pourriez (et certains diraient devrait) utiliser .prop au lieu de. attr.

$('.test').click(function(){ 
    alert($(this).prop('id')); 
}); 

Il est discuté dans ce post: .prop() vs .attr()

0

Rien de ce exemples, fonctionne pour moi

for (var i = 0; i < res.results.length; i++) { 
     $('#list_tags').append('<li class="dd-item" id="'+ res.results[i].id + '"><div class="dd-handle root-group">' + res.results[i].name + '</div></li>'); 
} 

    $('.dd-item').click(function() { 
    console.log($(this).attr('id')); 
    }); 
1

Soyez prudent si vous utilisez des fonctions de direction de graisse que vous obtiendrez non défini pour cette .id Wasted 10 minutes aujourd'hui se demandant ce qui se passait

+0

Qu'est-ce que Fat Arrow Functions? –

+1

https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Functions#Arrow_functions – nasoj1100

+0

merci mon pote! Très appréciée! –