<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 ?
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
$('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/
$('#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
.