¿Cómo puedo obtener la ID de un elemento usando jQuery?

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

¿Por qué no funciona lo anterior y cómo debo hacer esto?

La forma jQuery:

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

En tu ejemplo:

$(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 a través del DOM:

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

o incluso :

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

y la razón detrás del uso de $('#test').get(0)JQuery o incluso $('#test')[0]es que $('#test')es un selector JQuery y devuelve una matriz () de resultados, no un solo elemento por su funcionalidad predeterminada

una alternativa para el selector DOM en jquery es

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

que es diferente .attr()y $('#test').prop('foo')toma la foopropiedad DOM especificada , mientras que $('#test').attr('foo')toma el fooatributo HTML especificado y puede encontrar más detalles sobre las diferencias aquí .

$('selector').attr('id')devolverá la identificación del primer elemento coincidente. Referencia .

Si su conjunto coincidente contiene más de un elemento, puede usar el .each iterador convencional para devolver una matriz que contenga cada uno de los identificadores:

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

O, si está dispuesto a ponerse un poco más valiente, puede evitar el envoltorio y usar el .map atajo .

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

ides una propiedad de un html Element. Sin embargo, cuando escribe $("#something"), devuelve un objeto jQuery que envuelve los elementos DOM coincidentes. Para recuperar el primer elemento DOM coincidente, llame aget(0)

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

En este elemento nativo, puede llamar a id, o cualquier otra propiedad o función DOM nativa.

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

Esa es la razón por la cual idno funciona en su código.

Alternativamente, use el attrmétodo de jQuery ya que otras respuestas sugieren obtener el idatributo del primer elemento coincidente.

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

Las respuestas anteriores son geniales, pero a medida que evoluciona jquery ... también puede hacer:

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

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

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

Por supuesto, se requiere algún código de verificación, pero se implementa fácilmente.

.idno es una función jquery válida. Debe usar la .attr()función para acceder a los atributos que posee un elemento. Puedes usar.attr() para cambiar un valor de atributo especificando dos parámetros u obtener el valor especificando uno.

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

Si desea obtener una ID de un elemento, digamos por un selector de clase, cuando se disparó un evento (en este caso, un evento de clic) en ese elemento específico, entonces lo siguiente hará el trabajo:

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

$('#test').attr('id') En tu ejemplo:

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

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

Bueno, parece que no ha habido una solución y me gustaría proponer mi propia solución que es una expansión de los prototipos de JQuery. Puse esto en un archivo auxiliar que se carga después de la biblioteca JQuery, de ahí la verificación 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');
        }
    }
}

Puede que no sea perfecto, pero es un comienzo para obtener la inclusión en la biblioteca JQuery.

Devuelve un solo valor de cadena o una matriz de valores de cadena. La matriz de valores de cadena es para el evento que se utilizó un selector de elementos múltiples.

$('#test')devuelve un objeto jQuery, por lo que no puede usar simplemente object.idpara obtener suId

necesita usar $('#test').attr('id'), que devuelve su requeridoID del elemento

Esto también se puede hacer de la siguiente manera,

$('#test').get(0).id que es igual a document.getElementById('test').id

Quizás útil para otros que encuentran este hilo. El siguiente código solo funcionará si ya usa jQuery. La función devuelve siempre un identificador. Si el elemento no tiene un identificador, la función genera el identificador y lo agrega al elemento.

var generatedIdCounter = 0;

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

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

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

    return identifier;
}

Cómo utilizar:

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

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

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

Usando el código anterior, puede obtener la identificación.

Esta es una vieja pregunta, pero a partir de 2015 puede funcionar:

$('#test').id;

Y también puedes hacer tareas:

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

Siempre que defina el siguiente complemento JQuery:

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

Curiosamente, si elementes un elemento DOM, entonces:

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

Como el id es un atributo, puede obtenerlo utilizando el attrmétodo

Esto puede ser id de elemento, clase o automáticamente usando incluso

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

Importante: si está creando un nuevo objeto con jQuery y vinculando un evento, DEBE usar prop y no attr , de esta manera:

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

Esto finalmente resolverá tus problemas:

supongamos que tiene muchos botones en una página y desea cambiar uno de ellos con jQuery Ajax (o no ajax) dependiendo de su ID.

también digamos que tiene muchos tipos diferentes de botones (para formularios, para aprobación y para fines similares), y desea que jQuery trate solo los botones "me gusta".

aquí hay un código que funciona: jQuery tratará solo los botones que son de la clase .cls-hlpb, tomará la identificación del botón en el que se hizo clic y lo cambiará de acuerdo con los datos que provienen del 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>

El código fue tomado de w3schools y cambiado.

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

no responde el OP, pero puede ser interesante para otros: puede acceder al .idcampo en este caso:

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