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

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

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

Miedo de planetas
fuente
55
¿Obtener la ID de un elemento que ha sido seleccionado a través de su ID? oO
Martin Schneider
Código de muestra. Estoy trabajando en un desencadenador de evento que usa "esto" y necesito saber qué desencadenó el evento y realizar un seguimiento independiente de cuántas veces se desencadena cada elemento. Construir una muestra con "esto" será demasiado grande.
Nelson

Respuestas:

2303

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

instancia de mi
fuente
234
Me sorprende cada vez que jQuery no tiene un atajo para esto $('#test').id().
asombro
55
Rara vez sería útil porque las identificaciones suelen estar codificadas en HTML y JS. Cuando escribe JS, ya conoce la ID de algún elemento, por lo que escribe esa ID para recuperar el elemento. Rara vez necesita obtener la ID de un elemento mediante programación.
daniel1426
10
Haz eso 164969 veces. Además ahora estoy aquí. Tengo un código que inicializa los formularios. Algunos de los formularios tienen requisitos especiales. Yo podía busco elementos de forma específica para decidir qué hacer, pero creo que la identificación de la forma - por lo tanto la identificación de la forma - es la forma más lógica y segura.
Slashback
50
¿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
44
Opps ... haz eso 1.122.603 veces ...: P
BvuRVKyUVlViVIc7
85

$('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})
Steven
fuente
99
Por cierto, creo que retval.push($(this).attr('id'))se puede escribirretval.push(this.id)
Darren Cook
Si necesita un atributo de datos HMTL5 - ** use algo como esto: return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); })
revoque el
La propiedad .selector quedó en desuso 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 actualmente contenidos en el conjunto jQuery donde era una propiedad, ya que los métodos de recorrido posteriores pueden haber cambiado el conjunto.
Andrew Day
40

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")
Anurag
fuente
25

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

var myId = $("#test").prop("id");
Chris
fuente
44
@cjbarth attr()se agregó en 1.0 y prop()se agregó en 1.6, por lo que supongo que su comentario prop()es la nueva forma.
Erik Philips
3
@ErikPhilips, creo, en lugar de la forma antigua y la nueva, depende de si estás interesado en la salida original cuando se cargó la página ( attr) o si es potencialmente modificada por script ( prop). Si no va a tener que modificar el idatributo de cualquier elemento de uso de script del lado del cliente, a continuación, propy attrson idénticos.
AntonChanning
23
$.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.

stat
fuente
9

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

Joey C.
fuente
7

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');
 });
Jay Query
fuente
6

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

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

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

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.

Obispo de oro
fuente
4

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


fuente
1
.. y también $('#test')[0].idque es lo mismo que.get(0)
Gabriele Petrioli
3

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();
Tommy
fuente
2
$('tagname').attr('id');

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

Jaymin
fuente
2

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!
MarcG
fuente
2

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

Oussidi Mohamed
fuente
0

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');
=========================
Daniel Adenew
fuente
-1

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

Camila S.
fuente
-1

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.

usuario3495363
fuente
-1
<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));
    }
}
?>
Himani
fuente
-1

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

$('#drop-insert').map((i, o) => o.id)
mariotomo
fuente
1
Agradezco a los votantes negativos cuando explican lo que está mal en mi entendimiento. de lo contrario, los encuentro tan interesantes como un mosquito.
mariotomo