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

preguntado el 13 de julio de 10 a las 17:07

¿Obteniendo el ID de un elemento que ha sido seleccionado a través de su ID? oO -

Código de muestra. Estoy trabajando en un activador de eventos que usa "esto" y necesito saber qué activó el evento y realizar un seguimiento independiente de cuántas veces se activa cada elemento. Crear una muestra con "esto" será demasiado grande. -

19 Respuestas

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

Respondido 01 Oct 19, 22:10

Me sorprende cada vez que jQuery no tiene un atajo para esto como $('#test').id(). - temor

Rara vez sería útil porque los identificadores suelen estar codificados en HTML y JS. Cuando escribe JS, ya conoce el ID de algún elemento, por lo que escribe ese ID para recuperar el elemento. Rara vez es necesario obtener el ID de un elemento mediante programación. - daniel1426

Haz eso 164969 veces. Además, ahora estoy aquí. Tengo un código que inicializa formularios. Algunos formularios tienen requisitos especiales. I podría busque elementos de formulario específicos para decidir qué hacer, pero creo que identificar el formulario, por lo tanto, la identificación del formulario, es la forma más lógica y segura. - Slashback

¿Por qué necesitaría obtener la identificación de un elemento? Porque tengo un controlador de eventos adjunto a una clase de elementos y necesito saber qué elemento en particular desencadenó el evento. Espero estar haciendo esto bien. - Buttle Butkus

Opps .. haz eso 1,122,603 ​​veces ..: P - BvuRVKyUVlViVIc7

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

Respondido 13 Jul 10, 21:07

Por cierto, creo retval.push($(this).attr('id')) puede ser escrito retval.push(this.id) - Darren Cook

Si necesita un atributo de datos HMTL5 - ** entonces use algo como esto: return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); }) - revocar

La propiedad .selector quedó obsoleta en jQuery 1.7 y solo se mantiene en la medida necesaria para admitir .live () en el complemento jQuery Migrate. La propiedad nunca fue un indicador confiable del selector que podría usarse para obtener el conjunto de elementos contenidos actualmente en el conjunto jQuery donde era una propiedad, ya que los métodos de recorrido posteriores pueden haber cambiado el conjunto. - Día de Andrew

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

Respondido 28 Oct 15, 20:10

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

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

Respondido el 05 de diciembre de 13 a las 20:12

@cjbarth attr() fue agregado en 1.0, y prop() se agregó en 1.6, así que supongo que su comentario fue prop() es la nueva forma. - Erik Philips

@ErikPhilips Creo que, en lugar de la forma antigua y la nueva, depende de si está interesado en la salida original cuando se cargó la página (attr) o que potencialmente modificado por script (prop). Si en realidad no está modificando el id atributo de cualquier elemento que utilice el script del lado del cliente, luego prop y attr Son identicos. - AntonChanning

$.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!

Respondido el 25 de Septiembre de 14 a las 17:09

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

Respondido 13 Jul 10, 21:07

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

contestado el 29 de mayo de 15 a las 13:05

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

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

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

respondido 27 mar '17, 12:03

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.

Respondido 09 Feb 17, 21:02

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

Respondido 13 Jul 10, 21:07

.. y también $('#test')[0].id que es lo mismo que .get(0) - Gabriele Petrioli

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

Respondido 17 Feb 16, 13:02

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

Usando el código anterior puede obtener id.

Respondido el 03 de Septiembre de 13 a las 19:09

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!

respondido 25 nov., 15:20

Puesto que el id es un atributo, puede obtenerlo utilizando el attr método.

Respondido el 08 de junio de 18 a las 22:06

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

Respondido 03 ago 15, 19:08

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

Respondido 19 ago 15, 12:08

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

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

Respondido 15 Jul 15, 21:07

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

Respondido el 14 de enero de 19 a las 14:01

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)

contestado el 04 de mayo de 19 a las 23:05

Estoy agradecido con los votantes en contra cuando explican lo que está mal en mi entendimiento. de lo contrario, los encuentro tan interesantes como un mosquito. - mariotomo

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.