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

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) en JQuery o incluso $('#test')[0] es que $('#test') es un selector de JQuery y devuelve una matriz () de resultados ni un solo elemento por su funcionalidad predeterminada

una alternativa para el selector DOM en jquery es

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

que es diferente de .attr() y $('#test').prop('foo') agarra el DOM especificado foo propiedad, mientras $('#test').attr('foo') agarra el HTML especificado foo atributo 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 combinado contiene más de un elemento, puede utilizar el convencional .each iterador para devolver una matriz que contiene cada uno de los ID:

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

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

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

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

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

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

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

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

Alternativamente, use jQuery's attr método como sugieren otras respuestas para obtener el id atributo del primer elemento coincidente.

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

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

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

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

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

Se requiere algún código de verificación, por supuesto, ¡pero se implementa fácilmente!

.id no es una función jquery válida. Necesitas usar el .attr() función para acceder a los atributos que posee un elemento. Puedes usar .attr() para cambiar el valor de un 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 mediante un selector de clases, cuando se disparó un evento (en este caso, haga clic en el evento) en ese elemento específico, 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 del prototipo de JQuery. Puse esto en un archivo Helper que se carga después de la biblioteca JQuery, de ahí la verificación de 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');
        }
    }
}

Puede que no sea perfecto, pero es un comienzo para quizás incluirlo 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.id para obtener su Id

necesitas usar $('#test').attr('id'), que devuelve su requerido ID 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 sea útil para otros que encuentren 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;
}

Modo de empleo:

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

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

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

Usando el código anterior puede obtener id.

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

$('#test').id;

Y también puedes realizar asignaciones:

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

Siempre que defina el siguiente complemento de JQuery:

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

Curiosamente, si element es un elemento DOM, entonces:

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

Puesto que el id es un atributo, puede obtenerlo utilizando el attr mé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');
=========================

Esto finalmente resolverá tus problemas:

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

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

aquí hay un código que está funcionando: el jQuery tratará solo los botones que son de clase .cls-hlpb, tomará el id del botón en el que se hizo clic y lo cambiará según los datos que provengan 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 se tomó de w3schools y se modificó.

Importante: si está creando un nuevo objeto con jQuery y vinculando un evento, DEBE utilizan el apuntalar y no attr, Así:

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

<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 al OP, pero puede ser interesante para otros: puedes acceder al .id campo en este caso:

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