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?

1134
demandé sur Yann Chabot 2010-07-13 21:11:50

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 .

1868
répondu instanceof me 2017-05-23 12:10:44

$('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})
71
répondu Steven Xu 2010-07-13 17:19:29

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")
37
répondu Anurag 2015-10-28 17:19:47

au-dessus des réponses sont grandes, mais comme jquery évolue.. donc vous pouvez aussi faire:

var myId = $("#test").prop("id");
24
répondu Chris 2013-12-05 16:46:08
$.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!

21
répondu stat 2014-09-25 13:15:36

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

http://api.jquery.com/attr /

10
répondu Joey C. 2010-07-13 17:17:19

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');
 });
7
répondu Jay Query 2015-05-29 10:35:43

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

5
répondu 2010-07-13 17:32:30

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

4
répondu GoldBishop 2017-02-09 18:27:51

$('#test').attr('id') Dans votre exemple:

<div id="test"></div>

$(document).ready(function() {
    alert($('#test').attr('id'));
}); 
4
répondu Kumar 2017-03-27 09:46:21

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();
3
répondu Tommy 2016-02-17 10:18:34
$('tagname').attr('id');

en utilisant le code ci-dessus, vous pouvez obtenir l'id.

2
répondu Jaymin 2013-09-03 15:42:57

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!
2
répondu MarcG 2015-11-25 17:47:37

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");

0
répondu Camila S. 2015-07-15 18:44:02

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');
=========================
0
répondu danielad 2015-08-03 16:29:34

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

0
répondu user3495363 2015-08-19 09:11:19

puisque id est un attribut, vous pouvez l'obtenir en utilisant la méthode attr .

0
répondu Oussidi Mohamed 2018-06-08 19:32:00