<div id="test"></div>
<script>
$(document).ready(function() {
alert($('#test').id);
});
</script>
Porque é que'o acima referido não funciona, e como devo fazer isto?
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 mesmo :
$('#test')[0].id;
e o motivo da utilização de $('#test').get(0)
em JQuery ou mesmo $('#test')[0]
é que $('#test')
é um seletor JQuery e ** devolve um array() de resultados*** não um único elemento por sua funcionalidade padrão
uma alternativa para o selector DOM em jquery é
$('#test').prop('id')
que é diferente de .attr()
e $('#test').prop('foo')
agarra a propriedade especificada DOM foo', enquanto
$('#test').attr('foo')agarra o atributo HTML
foo' especificado e você pode encontrar mais detalhes sobre as diferenças aqui.
$('selector').attr('id')
irá retornar o id do primeiro elemento combinado. Referência.
Se o seu conjunto combinado contém mais de um elemento, você pode utilizar o .cada
iterator convencional para retornar um array 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 desanimado, você pode evitar a embalagem e utilizar o .map
atalho.
return $('.selector').map(function(index,dom){return dom.id})
$('#test')
retorna um objeto jQuery, então você não pode utilizar simplesmente object.id
para obter seu Id
.
você precisa utilizar $('#test').attr('id')
, que retorna o seu ID
requerido do elemento
Isto também pode ser feito da seguinte forma ,
$('#test').get(0).id
que é igual a document.getElementById('test').id
.