Come posso ottenere l'ID di un elemento usando jQuery?

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

Perché non funziona sopra e come devo fare?

Il modo jQuery:

$('#test').attr('id')

Nel tuo esempio:

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

O tramite il DOM:

$('#test').get(0).id;

o anche :

$('#test')[0].id;

e la ragione dietro l'utilizzo di $('#test').get(0)in JQuery o addirittura $('#test')[0]è che $('#test')è un selettore JQuery e restituisce un array () di risultati non un singolo elemento dalla sua funzionalità predefinita

un'alternativa per il selettore DOM in jquery è

$('#test').prop('id')

che è diverso da .attr()e $('#test').prop('foo')afferra il DOM specificato fooproprietà, mentre $('#test').attr('foo')afferra il codice HTML specificato fooattributi e si possono trovare maggiori dettagli sulle differenze qui .

$('selector').attr('id')restituirà l'id del primo elemento corrispondente. Riferimento .

Se il set associato contiene più di un elemento, è possibile utilizzare l' .each iteratore convenzionale per restituire un array contenente ciascuno degli ID:

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

Oppure, se sei disposto a diventare un po 'più grintoso, puoi evitare il wrapper e utilizzare la .map scorciatoia .

return $('.selector').map(function(index,dom){return dom.id})

idè una proprietà di un html Element. Tuttavia, quando scrivi $("#something"), restituisce un oggetto jQuery che avvolge gli elementi DOM corrispondenti. Per recuperare il primo elemento DOM corrispondente, chiamaget(0)

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

Su questo elemento nativo, puoi chiamare id o qualsiasi altra proprietà o funzione DOM nativa.

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

Questo è il motivo per cui idnon funziona nel tuo codice.

In alternativa, usa il attrmetodo di jQuery poiché altre risposte suggeriscono di ottenere l' idattributo del primo elemento corrispondente.

$("#test").attr("id")

Le risposte sopra sono fantastiche, ma man mano che jquery si evolve .. puoi anche fare:

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

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

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

Un certo codice di controllo richiesto ovviamente, ma facilmente implementabile!

.idnon è una funzione jquery valida. È necessario utilizzare la .attr()funzione per accedere agli attributi di un elemento. È possibile utilizzare .attr()sia per modificare un valore di attributo specificando due parametri, sia per ottenere il valore specificandone uno.

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

Se vuoi ottenere un ID di un elemento, diciamo per esempio un selettore di classe, quando un evento (in questo caso evento click) è stato generato su quell'elemento specifico, allora il seguente farà il lavoro:

 $('.your-selector').click(function(){
       var id = $(this).attr('id');
 });

$('#test').attr('id') Nel tuo esempio:

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

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

Bene, sembra che non ci sia stata una soluzione e vorrei proporre la mia soluzione che è un'espansione del prototipo di JQuery. L'ho inserito in un file Helper che viene caricato dopo la libreria JQuery, quindi il controllo perwindow.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');
        }
    }
}

Potrebbe non essere perfetto, ma è forse un inizio per ottenere l'inclusione nella libreria JQuery.

Restituisce un singolo valore di stringa o una matrice di valori di stringa. La matrice di valori stringa è per l'evento utilizzato un selettore multi-elemento.

$('#test')restituisce un oggetto jQuery, quindi non puoi semplicemente usarlo object.idper ottenerloId

è necessario utilizzare $('#test').attr('id'), che restituisce la richiesta IDdell'elemento

Questo può anche essere fatto come segue,

$('#test').get(0).id che è uguale a document.getElementById('test').id

Forse utile per gli altri che trovano questa discussione. Il codice seguente funzionerà solo se usi già jQuery. La funzione restituisce sempre un identificatore. Se l'elemento non ha un identificatore, la funzione genera l'identificatore e lo aggiunge all'elemento.

var generatedIdCounter = 0;

$.fn.id = function() {
    var identifier = this.attr('id');

    if(!identifier) {
        generatedIdCounter++;
        identifier = 'isGenerated_' + generatedIdCounter;

        this.attr('id', identifier);
    }

    return identifier;
}

Come usare:

$('.classname').id();

$('#elementId').id();

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

Usando il codice sopra puoi ottenere l'id.

Questa è una vecchia domanda, ma a partire dal 2015 potrebbe effettivamente funzionare:

$('#test').id;

E puoi anche fare incarichi:

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

Finché si definisce il seguente plug-in JQuery:

Object.defineProperty($.fn, 'id', {
    get: function () { return this.attr("id"); },
    set: function (newValue) { this.attr("id", newValue); }
});

È interessante notare che, se elementè un elemento DOM, allora:

element.id === $(element).id; // Is true!

Poiché l' id è un attributo, è possibile ottenerlo utilizzando il attrmetodo

Può essere ID elemento, classe o automaticamente usando even

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

Importante: se stai creando un nuovo oggetto con jQuery e legando un evento, DEVI usare prop e non attr , in questo modo:

$("<div/>",{ id: "yourId", class: "yourClass", html: "<span></span>" }).on("click", function(e) { alert($(this).prop("id")); }).appendTo("#something");

Questo risolverà finalmente i tuoi problemi:

supponiamo che tu abbia molti pulsanti su una pagina e desideri cambiarne uno con jQuery Ajax (o non ajax) a seconda del loro ID.

diciamo anche che hai molti tipi diversi di pulsanti (per moduli, per approvazione e per scopi simili) e vuoi che jQuery tratti solo i pulsanti "mi piace".

ecco un codice che funziona: jQuery tratterà solo i pulsanti della classe .cls-hlpb, prenderà l'id del pulsante su cui è stato fatto clic e lo cambierà in base ai dati che provengono da 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>

il codice è stato preso da w3schools e modificato.

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

non risponde all'OP, ma può essere interessante per gli altri: .idin questo caso è possibile accedere al campo:

$('#drop-insert').map((i, o) => o.id)