Comment puis-je obtenir L'ID D'un élément en utilisant jQuery?
<div id="test"></div>
<script>
$(document).ready(function() {
alert($('#test').id);
});
</script>
pourquoi ce qui précède ne fonctionne pas, et comment dois-je le faire?
17 réponses
jQuery": 1519140920"
$('#test').attr('id')
dans votre exemple:
<div id="test"></div>
$(document).ready(function() {
alert($('#test').attr('id'));
});
Ou via le DOM:
$('#test').get(0).id;
ou même:
$('#test')[0].id;
et la raison derrière l'utilisation de $('#test').get(0)
dans JQuery ou même $('#test')[0]
est que $('#test')
est un sélecteur de JQuery et retourne un tableau () de résultats pas un seul élément par sa fonctionnalité par défaut
une alternative pour le sélecteur DOM en jquery est
$('#test').prop('id')
qui est différent de .attr()
et $('#test').prop('foo')
saisit la propriété DOM foo
, tandis que $('#test').attr('foo')
saisit L'attribut HTML foo
et vous pouvez trouver plus de détails sur les différences ici .
$('selector').attr('id')
retournera l'id du premier élément apparié. référence .
Si votre ensemble contient plus d'un élément, vous pouvez utiliser le classique .each
itérateur 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 à obtenir un peu de grittier, vous pouvez éviter l'emballage et utiliser le .map
raccourci .
return $('.selector').map(function(index,dom){return dom.id})
id
est une propriété d'un html Element
. Cependant, lorsque vous écrivez $("#something")
, il retourne un objet jQuery qui enveloppe le ou les éléments DOM correspondants. Pour récupérer le premier élément DOM correspondant, composez get(0)
$("#test").get(0)
sur cet élément natif, vous pouvez appeler id, ou toute autre propriété ou fonction natif DOM.
$("#test").get(0).id
C'est la raison pour laquelle id
ne fonctionne pas dans votre code.
alternativement, utilisez la méthode attr
de jQuery comme d'autres réponses suggèrent pour obtenir l'attribut id
du premier élément de correspondance.
$("#test").attr("id")
au-dessus des réponses sont grandes, mais comme jquery évolue.. donc vous pouvez aussi faire:
var myId = $("#test").prop("id");
$.fn.extend({
id : function() {
return this.attr('id');
}
});
alert( $('#element').id() );
quelques codes de vérification nécessaires bien sûr, mais facilement implémentés!
.id
n'est pas une fonction jquery. Vous devez utiliser la fonction .attr()
pour accéder aux attributs qu'un élément possède. Vous pouvez utiliser .attr()
à la fois pour changer une valeur d'attribut en spécifiant deux paramètres, ou obtenir la valeur en spécifiant un.
si vous voulez obtenir un ID D'un élément, disons par un sélecteur de classe, lorsqu'un événement (dans ce cas-ci cliquez sur l'événement) a été lancé sur cet élément spécifique, alors le suivant fera le travail:
$('.your-selector').click(function(){
var id = $(this).attr('id');
});
$('#test')
retourne un objet jQuery, donc vous ne pouvez pas utiliser simplement object.id
pour obtenir son Id
vous devez utiliser $('#test').attr('id')
, qui renvoie votre ID
requis de l'élément
Cela peut aussi être fait comme suit ,
$('#test').get(0).id
qui est égal à document.getElementById('test').id
Eh bien, il semble qu'il n'y ait pas eu de solution et je voudrais proposer ma propre solution qui est une extension du prototype de JQuery. J'ai mis cela dans un fichier D'aide qui est chargé après la bibliothèque JQuery, d'où le chèque pour window.jQuery
if (window.jQuery) {
$.prototype.id = function () {
if (this.length > 1) {
var val = [];
this.each(function (idx, el) {
val.push($(el).id());
});
return val;
} else {
return this.attr('id');
}
}
}
ce n'est peut-être pas parfait, mais c'est peut-être un début d'inclusion dans la bibliothèque JQuery.
renvoie soit une valeur de chaîne simple, soit un tableau de valeurs de chaîne. Le Tableau de chaîne de caractères valeurs, est pour l'événement un sélecteur multi-éléments a été utilisé.
$('#test').attr('id')
Dans votre exemple:
<div id="test"></div>
$(document).ready(function() {
alert($('#test').attr('id'));
});
peut-être utile pour d'autres qui trouvent ce fil. Le code ci-dessous ne fonctionnera que si vous utilisez déjà jQuery. La fonction renvoie toujours un identifiant. Si l'élément n'a pas d'identificateur de la fonction génère l'identificateur et l'ajouter à l'.
var generatedIdCounter = 0;
$.fn.id = function() {
var identifier = this.attr('id');
if(!identifier) {
generatedIdCounter++;
identifier = 'isGenerated_' + generatedIdCounter;
this.attr('id', identifier);
}
return identifier;
}
comment utiliser:
$('.classname').id();
$('#elementId').id();
$('tagname').attr('id');
en utilisant le code ci-dessus, vous pouvez obtenir l'id.
C'est une vieille question, mais à partir de 2015 cela peut effectivement fonctionner:
$('#test').id;
et vous pouvez également faire des missions:
$('#test').id = "abc";
aussi longtemps que vous définissez le plugin jQuery suivant:
Object.defineProperty($.fn, 'id', {
get: function () { return this.attr("id"); },
set: function (newValue) { this.attr("id", newValue); }
});
fait intéressant, si element
est un élément DOM, alors:
element.id === $(element).id; // Is true!
Important: si vous créez un nouvel objet avec jQuery et liez un événement, vous doit utiliser prop et non attr , comme ceci:
$("<div/>",{ id: "yourId", class: "yourClass", html: "<span></span>" }).on("click", function(e) { alert($(this).prop("id")); }).appendTo("#something");
il peut s'agir de l'élément id , class , ou automatiquement en utilisant
------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================
cela va enfin résoudre vos problèmes:
disons que vous avez beaucoup de boutons sur une page et que vous voulez en changer un avec jQuery Ajax (ou pas ajax) en fonction de leur ID.
permet également de dire que vous avez beaucoup de différents types de boutons (pour les formulaires, pour l'approbation et pour les buts similaires), et vous voulez que le jquery traite seulement les boutons" comme".
voici un code qui fonctionne: le jQuery ne traitera que les les boutons sont de la classe .cls hlpb, il va prendre l'id du bouton qui a été cliqué et la modifier selon les données de l'ajax.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$(".clshlpbtn").on('click',function(e){
var id = $(e.target).attr('id');
alert("The id of the button that was clicked: "+id);
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data,status){
//parsing the data should come here:
//var obj = jQuery.parseJSON(data);
//$("#"+id).val(obj.name);
//etc.
if (id=="btnhlp-1")
$("#"+id).attr("style","color:red");
$("#"+id).val(data);
});
});
});
</script>
</head>
<body>
<input type="button" class="clshlpbtn" id="btnhlp-1" value="first btn"> </input>
<br />
<input type="button" class="clshlpbtn" id="btnhlp-2" value="second btn"> </input>
<br />
<input type="button" class="clshlpbtn" id="btnhlp-9" value="ninth btn"> </input>
</body>
</html>
Le code a été pris dans w3schools et modifié.
puisque id est un attribut, vous pouvez l'obtenir en utilisant la méthode attr
.