Comment obtenir l'ID d'un élément en utilisant jQuery ?

 
<div id="test"></div>
<script>
  $(document).ready(function() {
    alert($('#test').id);
  });  
</script>

Pourquoi la méthode ci-dessus ne fonctionne-t-elle pas, et comment dois-je procéder ?

Yann Chabot
Question modifiée 15 mai 2017 в 2:16
Programmation
jquery jquery-selectors
13 juillet 2010 в 5:11
23 vues
Solution

La méthode jQuery :

$('#test').attr('id')

Dans votre exemple :

$(document).ready(function() {
  console.log($('#test').attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>

Ou par l'intermédiaire du DOM :

$('#test').get(0).id;

ou encore :

$('#test')[0].id;

et la raison derrière l'utilisation de $('#test').get(0) en JQuery ou même $('#test')[0] est que $('#test') est un sélecteur JQuery et renvoie un tableau() de résultats et non un seul élément par sa fonctionnalité par défaut.

une alternative pour le sélecteur DOM dans JQuery est

$('#test').prop('id')

qui est différent de .attr() et $('#test').prop('foo') saisit la propriété DOM foo spécifiée, alors que $('#test').attr('foo') saisit l'attribut HTML foo spécifié et vous pouvez trouver plus de détails sur les différences [ici][1].

[1] : https://stackoverflow.com/questions/5874652/prop-vs-attr

dota2pro
Réponse modifiée 1er octobre 2019 в 7:38
Commentaires (20)

$('selector').attr('id') renverra l'id du premier élément correspondant. [Référence][1].

Si votre ensemble contient plus d'un élément, vous pouvez utiliser le traditionnel .each [iterator][2] pour retourner un tableau contenant chacun des ids :

var retval = []
$('selector').each(function(){
  retval.push($(this).attr('id'))
})
return retval

Ou, si vous êtes prêt à aller plus loin, vous pouvez éviter le wrapper et utiliser le .map [raccourci][3].

return $('.selector').map(function(index,dom){return dom.id})

[1] : http://api.jquery.com/attr/ [2] : http://api.jquery.com/each/ [3] : http://api.jquery.com/map/

Steven
Réponse modifiée 13 juillet 2010 в 5:19
Commentaires (3)

$('#test') renvoie un objet jQuery, vous ne pouvez donc pas utiliser simplement object.id pour obtenir son Id.

vous devez utiliser $('#test').attr('id'), qui renvoie le ID de l'élément que vous souhaitez.

Cela peut également être fait comme suit ,

$('#test').get(0).id, qui est égal à document.getElementById('test').id.

Commentaires (1)