read - Como posso obter o ID de um elemento usando jQuery?




read class jquery (12)

A maneira jQuery:

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

No seu exemplo:

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

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

Ou através do DOM:

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

ou mesmo:

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

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

uma alternativa para o seletor DOM em jquery é

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

que é diferente de .attr() e $('#test').prop('foo') pega a propriedade DOM foo especificada, enquanto $('#test').attr('foo') pega o arquivo HTML especificado atributo e você pode encontrar mais detalhes sobre as diferenças here .

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

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


As respostas acima são ótimas, mas como o jquery evolui, você também pode fazer:

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

Como o id é um atributo, você pode obtê-lo usando o método attr .


Esta é uma questão antiga, mas a partir de 2015 isso pode funcionar:

$('#test').id;

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

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

Contanto que você defina o seguinte plugin JQuery:

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

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

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

Isso finalmente resolverá seus problemas:

Vamos dizer que você tem muitos botões em uma página e você quer mudar um deles com jQuery Ajax (ou não ajax) dependendo do seu ID.

Também vamos dizer que você tem muitos tipos diferentes de botões (para formulários, para aprovação e para propósitos semelhantes), e você quer que o jQuery trate apenas os botões "curtir".

aqui está um código que está funcionando: o jQuery tratará apenas os botões que são da classe .cls-hlpb, ele pegará o id do botão que foi clicado e irá alterá-lo de acordo com os dados que vêm 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>

código foi retirado de w3schools e alterado.


Isso pode ser o ID do elemento, a classe ou o uso automático

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

Talvez seja útil para os outros 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 isso 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();

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

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

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

$('selector').attr('id') retornará o id do primeiro elemento correspondente. Reference .

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

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

Ou, se você estiver disposto a ficar um pouco mais corajoso, poderá evitar o wrapper e usar o shortcut .map .

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

.id não é uma função jquery válida. Você precisa usar a função .attr() 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.

Reference


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

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


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

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

Alguns códigos de verificação são obrigatórios, mas são facilmente implementados!





jquery-selectors