Como posso obter o ID de um elemento usando jQuery?

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

Por que o procedimento acima não funciona e como devo fazer isso?

fearofawhackplanet
fonte
5
Obtendo o ID de um elemento que foi selecionado por meio dele? oO
Martin Schneider
Código de amostra. Estou trabalhando em um gatilho de evento que usa "this" e preciso saber o que desencadeou o evento e acompanhar independentemente quantas vezes cada elemento é disparado. Construir uma amostra com "this" será muito grande.
Nelson

Respostas:

2303

A maneira jQuery:

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

No seu exemplo:

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

Ou através do DOM:

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

ou até:

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

e a razão por trás do uso $('#test').get(0)no JQuery ou mesmo $('#test')[0]é que $('#test')é um seletor JQuery e retorna uma matriz () de resultados, não um único elemento por sua funcionalidade padrão

uma alternativa para o seletor DOM no jquery é

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

que é diferente .attr()e $('#test').prop('foo')captura a foopropriedade DOM especificada , enquanto $('#test').attr('foo')captura o fooatributo HTML especificado e você pode encontrar mais detalhes sobre diferenças aqui .

exemplo de mim
fonte
234
Surpreende-me cada vez que o jQuery não possui um atalho para isso $('#test').id().
temor
5
Raramente seria útil porque os IDs são tipicamente codificados no HTML e JS. Quando você escreve JS, já conhece o ID de algum elemento, portanto, escreve esse ID para recuperar o elemento. Você raramente precisa obter o ID de um elemento programaticamente.
Daniel1426
10
Faça isso 164969 vezes. Além disso, agora estou aqui. Eu tenho um código que inicializa formulários. Alguns dos formulários têm requisitos especiais. Eu poderia procurar por elementos específicos do formulário para decidir o que fazer, mas acho que identificar o formulário - portanto, o ID do formulário - é a maneira mais lógica e segura.
Slashback
50
Por que eu precisaria obter a identificação de um elemento? Porque eu tenho um manipulador de eventos anexado a uma classe de elementos e preciso saber qual elemento específico acionou o evento. Espero estar fazendo isso certo.
Buttle Butkus 28/03
4
Opps .. faça isso 1.122.603 vezes ..: P
BvuRVKyUVlViVIc7 18/08
85

$('selector').attr('id')retornará o ID do primeiro elemento correspondente. Referência .

Se seu conjunto correspondente contiver mais de um elemento, você poderá usar o .each iterador convencional para retornar uma matriz contendo cada um dos IDs:

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

Ou, se você quiser ficar um pouco mais duro, evite o invólucro e use o .map atalho .

return $('.selector').map(function(index,dom){return dom.id})
Steven
fonte
9
BTW, eu acho que retval.push($(this).attr('id'))pode ser escritoretval.push(this.id)
Darren Cozinhe
Se você precisar de um atributo de dados HMTL5 - **, use algo como isto: return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); })
revogue
A propriedade .selector foi descontinuada no jQuery 1.7 e é mantida apenas na extensão necessária para suportar .live () no plug-in jQuery Migrate. A propriedade nunca foi um indicador confiável do seletor que poderia ser usado para obter o conjunto de elementos atualmente contidos no conjunto jQuery em que era uma propriedade, pois os métodos transversais subsequentes podem ter alterado o conjunto.
Andrew Day
40

idé uma propriedade de um html Element. No entanto, quando você escreve $("#something"), ele retorna um objeto jQuery que envolve os elementos DOM correspondentes. Para recuperar o primeiro elemento DOM correspondente, chameget(0)

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

Nesse elemento nativo, você pode chamar o ID ou qualquer outra propriedade ou função DOM nativa.

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

Essa é a razão pela qual idnão está funcionando no seu código.

Como alternativa, use o attrmétodo jQuery, pois outras respostas sugerem obter o idatributo do primeiro elemento correspondente.

$("#test").attr("id")
Anurag
fonte
25

As respostas acima são ótimas, mas à medida que o jquery evolui ... você também pode:

var myId = $("#test").prop("id");
Chris
fonte
4
O @cjbarth attr()foi adicionado na versão 1.0, e na versão prop()1.6, por isso estou assumindo que o seu comentário foi prop()o novo caminho.
Erik Philips
3
@ErikPhilips Acredito que, em vez de maneira antiga e nova, depende se você está interessado na saída original quando a página é carregada ( attr) ou na potencialmente modificada pelo script ( prop). Se você não está realmente modificando o idatributo de qualquer elemento usando o script do lado do cliente, em seguida, prope attrsão idênticos.
218166 AntonChanning
23
$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

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

É necessário algum código de verificação, é claro, mas facilmente implementado!

Estado
fonte
9

.idnão é uma função jquery válida. Você precisa usar a .attr()função para acessar atributos que um elemento possui. Você pode usar .attr()para alterar um valor de atributo especificando dois parâmetros ou obter o valor especificando um.

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

Joey C.
fonte
7

Se você deseja obter um ID de um elemento, digamos, por um seletor de classe, quando um evento (neste caso, clique em evento) foi acionado nesse elemento específico, o seguinte fará o trabalho:

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

$('#test').attr('id') No seu exemplo:

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

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

Bem, parece que não houve uma solução e gostaria de propor minha própria solução, que é uma expansão do protótipo JQuery. Coloquei isso em um arquivo Helper carregado após a biblioteca JQuery, portanto, a verificação 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');
        }
    }
}

Pode não ser perfeito, mas é um começo para talvez ser incluído na biblioteca JQuery.

Retorna um único valor de sequência ou uma matriz de valores de sequência. A matriz de valores de sequência é para o evento em que um seletor de vários elementos foi usado.

GoldBishop
fonte
4

$('#test')retorna um objeto jQuery; portanto, você não pode usar simplesmente object.idpara obter seuId

você precisa usar $('#test').attr('id'), que retorna as informações necessáriasID do elemento

Isso também pode ser feito da seguinte maneira:

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


fonte
1
.. e também $('#test')[0].idque é o mesmo que.get(0)
Gabriele Petrioli 13/07/10
3

Talvez útil para outras pessoas que encontrarem este tópico. O código abaixo só funcionará se você já usa o jQuery. A função retorna sempre um identificador. Se o elemento não tiver um identificador, a função gera o identificador e anexa-o ao elemento.

var generatedIdCounter = 0;

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

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

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

    return identifier;
}

Como usar:

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

$('#elementId').id();
Tommy
fonte
2
$('tagname').attr('id');

Usando o código acima, você pode obter o id.

Jaymin
fonte
2

Esta é uma pergunta antiga, mas a partir de 2015 isso pode realmente funcionar:

$('#test').id;

E você também pode fazer atribuições:

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

Contanto que você defina o seguinte plug-in JQuery:

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

Curiosamente, se elementé um elemento DOM, então:

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

Como o ID é um atributo, você pode obtê-lo usando o attrmétodo

Oussidi Mohamed
fonte
0

Pode ser a identificação do elemento, classe ou automaticamente usando

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

Importante: se você estiver criando um novo objeto com jQuery e vinculando um evento, DEVE usar prop e não attr , assim:

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

Camila S.
fonte
-1

Isso finalmente resolverá seus problemas:

digamos que você tenha muitos botões em uma página e deseje alterar um deles com o jQuery Ajax (ou não o ajax), dependendo de seu ID.

digamos também que você possui muitos tipos diferentes de botões (para formulários, para aprovação e para propósitos semelhantes) e deseja que o jQuery trate apenas os botões "like".

Aqui está um código que está funcionando: o jQuery tratará apenas os botões da classe .cls-hlpb, pegará o ID do botão que foi clicado e o alterará de acordo com os dados provenientes do 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>

O código foi retirado do w3schools e alterado.

user3495363
fonte
-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
fonte
-1

não responde ao OP, mas pode ser interessante para outras pessoas: você pode acessar o .idcampo neste caso:

$('#drop-insert').map((i, o) => o.id)
mariotomo
fonte
1
Sou grato aos que recusam o voto quando explicam o que está errado no meu entendimento. caso contrário, acho-os tão interessantes quanto um mosquito.
Mariotomo 31/10/19