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

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

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 .

$('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})

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

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

var myId = $("#test").prop("id");

$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

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

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

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

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');
 });

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

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

$(document).ready(function() {
    alert($('#test').attr('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 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é.

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

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

$('tagname').attr('id');

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

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!

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

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');
=========================

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

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

<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));
    }
}
?>

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)