Comment puis-je obtenir l'ID d'un élément à l'aide de jQuery?

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

Pourquoi les éléments ci-dessus ne fonctionnent-ils pas et comment dois-je procéder?

fearofawhackplanet
la source
5
Obtenir l'ID d'un élément qui a été sélectionné via son ID? oO
Martin Schneider
Exemple de code. Je travaille sur un déclencheur d'événement qui utilise "ceci" et j'ai besoin de savoir ce qui a déclenché l'événement et de suivre indépendamment le nombre de déclenchements de chaque élément. Construire un échantillon avec "this" sera beaucoup trop volumineux.
Nelson

Réponses:

2303

La manière 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 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 qu'il $('#test')s'agit d'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 diffère de la propriété DOM spécifiée .attr()et $('#test').prop('foo')la capture foo, tandis qu'elle $('#test').attr('foo')saisit l' fooattribut HTML spécifié et vous pouvez trouver plus de détails sur les différences ici .

par exemple de moi
la source
234
Cela m'étonne à chaque fois que jQuery n'a pas de raccourci pour cela $('#test').id().
admiration le
5
Cela serait rarement utile car les identifiants sont généralement codés en dur dans le HTML et le JS. Lorsque vous écrivez JS, vous connaissez déjà l'ID d'un élément, vous écrivez donc cet ID pour récupérer l'élément. Vous avez rarement besoin d'obtenir l'ID d'un élément par programme.
daniel1426
10
Faites 164969 fois. Et maintenant je suis là. J'ai du code qui initialise les formulaires. Quelques-uns des formulaires ont des exigences particulières. Je pourrais rechercher des éléments de formulaire spécifiques pour décider quoi faire, mais je pense que l'identification de la forme - donc l'id de la forme - est le moyen le plus logique et le plus sûr.
Slashback
50
Pourquoi aurais-je besoin d'obtenir l'identifiant d'un élément? Parce que j'ai un gestionnaire d'événements attaché à une classe d'éléments, et j'ai besoin de savoir quel élément particulier a déclenché l'événement. J'espère que je fais ça bien.
Buttle Butkus
4
Opps .. font ça 1 122 603 fois ..: P
BvuRVKyUVlViVIc7
85

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

Si votre ensemble correspondant contient plusieurs éléments, vous pouvez utiliser l' .each itérateur conventionnel pour renvoyer un tableau contenant chacun des identifiants:

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

Ou, si vous êtes prêt à devenir un peu plus grincheux, vous pouvez éviter le wrapper et utiliser le .map raccourci .

return $('.selector').map(function(index,dom){return dom.id})
Steven
la source
9
BTW, je pense que cela retval.push($(this).attr('id'))peut être écritretval.push(this.id)
Darren Cook
Si vous avez besoin d'un attribut de données HMTL5 - ** alors utilisez quelque chose comme ceci: return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); })
révoquez
La propriété .selector a été déconseillée dans jQuery 1.7 et n'est maintenue que dans la mesure nécessaire pour prendre en charge .live () dans le plug-in jQuery Migrate. La propriété n'a jamais été un indicateur fiable du sélecteur qui pouvait être utilisé pour obtenir l'ensemble d'éléments actuellement contenu dans l'ensemble jQuery où il s'agissait d'une propriété, car les méthodes de parcours ultérieures peuvent avoir modifié l'ensemble.
Andrew Day
40

idest une propriété d'un html Element. Cependant, lorsque vous écrivez $("#something"), il retourne un objet jQuery qui encapsule les éléments DOM correspondants. Pour récupérer le premier élément DOM correspondant, appelezget(0)

$("#test").get(0)

Sur cet élément natif, vous pouvez appeler id, ou toute autre propriété ou fonction DOM native.

$("#test").get(0).id

C'est la raison pour laquelle idne fonctionne pas dans votre code.

Alternativement, utilisez la attrméthode de jQuery car d'autres réponses suggèrent d'obtenir l' idattribut du premier élément correspondant.

$("#test").attr("id")
Anurag
la source
25

Les réponses ci-dessus sont excellentes, mais au fur et à mesure que jquery évolue .. vous pouvez également faire:

var myId = $("#test").prop("id");
Chris
la source
4
@cjbarth a attr()été ajouté en 1.0 et a prop()été ajouté en 1.6, donc je suppose que votre commentaire prop()est la nouvelle façon.
Erik Philips
3
@ErikPhilips Je crois que, plutôt que l'ancienne et la nouvelle façon, cela dépend si vous êtes intéressé par la sortie d'origine lorsque la page est chargée ( attr) ou potentiellement modifiée par script ( prop). Si vous ne modifiez pas réellement l' idattribut d'un élément à l'aide d'un script côté client, alors propet attrsont identiques.
AntonChanning du
23
$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

alert( $('#element').id() );

Un certain code de vérification est requis, mais facile à mettre en œuvre!

stat
la source
9

.idn'est pas une fonction jquery valide. Vous devez utiliser la .attr()fonction pour accéder aux attributs d'un élément. Vous pouvez utiliser .attr()à la fois pour modifier une valeur d'attribut en spécifiant deux paramètres ou pour obtenir la valeur en spécifiant un.

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

Joey C.
la source
7

Si vous souhaitez obtenir l'ID d'un élément, disons par un sélecteur de classe, lorsqu'un événement (dans ce cas, cliquez sur événement) a été déclenché sur cet élément spécifique, alors ce qui suit fera le travail:

 $('.your-selector').click(function(){
       var id = $(this).attr('id');
 });
Jay Query
la source
6

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

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

$(document).ready(function() {
    alert($('#test').attr('id'));
}); 
Kumar
la source
5

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 JQuery. Je mets cela dans un fichier d'aide qui est chargé après la bibliothèque JQuery, d'où la vérification dewindow.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 un début pour peut-être obtenir l'inclusion dans la bibliothèque JQuery.

Renvoie une valeur de chaîne unique ou un tableau de valeurs de chaîne. Le tableau de valeurs de chaîne est pour l'événement où un sélecteur multi-éléments a été utilisé.

GoldBishop
la source
4

$('#test')renvoie un objet jQuery, vous ne pouvez donc pas utiliser simplement object.idpour obtenir sonId

vous devez utiliser $('#test').attr('id'), ce qui renvoie votre requis IDde l'élément

Cela peut également être fait comme suit,

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


la source
1
.. et $('#test')[0].idqui est le même que.get(0)
Gabriele Petrioli
3

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'identifiant, la fonction génère l'identifiant et l'ajoute à l'élément.

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();
Tommy
la source
2
$('tagname').attr('id');

En utilisant le code ci-dessus, vous pouvez obtenir l'identifiant.

Jaymin
la source
2

C'est une vieille question, mais à partir de 2015, cela pourrait fonctionner:

$('#test').id;

Et vous pouvez également effectuer des affectations:

$('#test').id = "abc";

Tant 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 elementest un élément DOM, alors:

element.id === $(element).id; // Is true!
MarcG
la source
2

Puisque l' id est un attribut, vous pouvez l'obtenir en utilisant la attrméthode.

Oussidi Mohamed
la source
0

Cela peut être l'ID d'élément, la classe ou utiliser automatiquement

------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================
Daniel Adenew
la source
-1

Important: si vous créez un nouvel objet avec jQuery et liez un événement, vous DEVEZ 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");

Camila S.
la source
-1

Cela résoudra enfin vos problèmes:

disons que vous avez plusieurs boutons sur une page et que vous souhaitez en changer un avec jQuery Ajax (ou non ajax) en fonction de leur ID.

permet également de dire que vous disposez de nombreux types de boutons différents (pour les formulaires, pour l'approbation et à des fins similaires), et que vous souhaitez que jQuery traite uniquement les boutons "similaires".

voici un code qui marche: le jQuery ne traitera que les boutons qui sont de classe .cls-hlpb, il prendra l'id du bouton sur lequel on a cliqué et le changera en fonction des données qui viennent 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é extrait de w3schools et modifié.

user3495363
la source
-1
<html>
<head>
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
<?php
    // include Database connection file 
    include("db_connection.php");

    // Design initial table header 
    $data = '<table class="table table-bordered table-striped">
                        <tr>
                            <th>No.</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email Address</th>
                            <th>Update</th>
                            <th>Delete</th>
                        </tr>';
    $query = "SELECT * FROM users";
    if (!$result = mysqli_query($con, $query)) {
        exit(mysqli_error($con));
    }
    // if query results contains rows then featch those rows 
    if(mysqli_num_rows($result) > 0)
    {
        $number = 1;
        while($row = mysqli_fetch_assoc($result))
        {
            $data .= '<tr>
                <td>'.$number.'</td>
                <td>'.$row['first_name'].'</td>
                <td>'.$row['last_name'].'</td>
                <td>'.$row['email'].'</td>
                    <td><button onclick="DeleteUser('.$row['id'].')" class="btn btn-danger">Delete</button>
                </td>
            </tr>';
            $number++;
        }
    }

    else
    {
        // records now found 
        $data .= '<tr><td colspan="6">Records not found!</td></tr>';
    }

    $data .= '</table>';
    echo $data;
?>

<script type="text/javascript">

    function DeleteUser(id) {
    var conf = confirm("Are you sure, do you really want to delete User?");
    if (conf == true) {
        $.ajax({
                    url:'deleteUser.php',
                    method:'POST',
                    data:{
                        id:id
                    },
            success:function(data){
                      alert('delete successfully');
                   }




}
});

deleteUser.php

<?php
// check request
if(isset($_POST['id']) && isset($_POST['id']) != "")
{
    // include Database connection file
    include("db_connection.php");

    // get user id
    $user_id = $_POST['id'];

    // delete User
    $query = "DELETE FROM users WHERE id = '$user_id'";
    if (!$result = mysqli_query($con, $query)) {
        exit(mysqli_error($con));
    }
}
?>
Himani
la source
-1

il ne répond pas au PO, mais peut être intéressant pour d'autres: vous pouvez accéder au .idchamp dans ce cas:

$('#drop-insert').map((i, o) => o.id)
mariotomo
la source
1
Je suis reconnaissant aux votants qui expliquent ce qui ne va pas dans ma compréhension. sinon je les trouve aussi intéressants qu'un moustique.
mariotomo