name - obtener id jquery
¿Cómo puedo obtener el ID de un elemento utilizando jQuery? (17)
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 de ayuda que se carga después de la biblioteca JQuery, de ahí la comprobació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 tal vez 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.
<div id="test"></div>
<script>
$(document).ready(function() {
alert($(''#test'').id);
});
</script>
¿Por qué no funciona lo anterior y cómo debo hacer esto?
Dado que el ID es un atributo, puede obtenerlo utilizando el método attr .
Esta es una pregunta antigua, pero a partir de 2015 esto podría funcionar:
$(''#test'').id;
Y también puedes hacer tareas:
$(''#test'').id = "abc";
Mientras 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 el element es un elemento DOM, entonces:
element.id === $(element).id; // Is true!
Esto finalmente resolverá sus 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 fines similares), y desea que jQuery trate solo los botones "me gusta".
Aquí hay un código que funciona: jQuery tratará solo los botones 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.
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'');
=========================
Importante: si está creando un nuevo objeto con jQuery y vinculando un evento, DEBE usar prop y no attr , como esto:
$("<div/>",{ id: "yourId", class: "yourClass", html: "<span></span>" }).on("click", function(e) { alert($(this).prop("id")); }).appendTo("#something");
La forma jQuery:
$(''#test'').attr(''id'')
En tu ejemplo:
<div id="test"></div>
$(document).ready(function() {
alert($(''#test'').attr(''id''));
});
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 por defecto.
una alternativa para el selector de DOM en jQuery es
$(''#test'').prop(''id'')
que es diferente de .attr() y $(''#test'').prop(''foo'') toma la propiedad DOM foo especificada, mientras que $(''#test'').attr(''foo'') toma el archivo HTML especificado foo Atributo y puedes encontrar más detalles sobre las diferencias here .
Las respuestas anteriores son excelentes, pero a medida que evoluciona jquery ... así también puedes hacer:
var myId = $("#test").prop("id");
Si desea obtener un ID de un elemento, digamos por un selector de clase, cuando se activó un evento (en este caso, evento de clic) en ese elemento específico, lo siguiente hará el trabajo:
$(''.your-selector'').click(function(){
var id = $(this).attr(''id'');
});
Tal vez sea útil para otros que encuentren este hilo. El siguiente código solo funcionará si ya usas 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();
$(''#test'').attr(''id'') En su ejemplo:
<div id="test"></div>
$(document).ready(function() {
alert($(''#test'').attr(''id''));
});
$(''#test'') devuelve un objeto jQuery, por lo que no puede usar simplemente object.id para obtener su Id
necesita usar $(''#test'').attr(''id'') , que devuelve el ID requerido del elemento
Esto también se puede hacer de la siguiente manera,
$(''#test'').get(0).id que es igual a document.getElementById(''test'').id
$(''selector'').attr(''id'') devolverá el id del primer elemento coincidente. Reference .
Si su conjunto coincidente contiene más de un elemento, puede usar el iterator .each 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 ser un poco más agresivo, puede evitar el envoltorio y usar el shortcut .map .
return $(''.selector'').map(function(index,dom){return dom.id})
.id no es una función jquery válida. .attr() usar la función .attr() para acceder a los atributos que posee un elemento. Puede usar .attr() para cambiar un valor de atributo especificando dos parámetros u obtener el valor especificando uno.
id es una propiedad de un Element html. Sin embargo, cuando escribes $("#something") , devuelve un objeto jQuery que envuelve los elementos DOM correspondientes. Para recuperar el primer elemento DOM coincidente, llame a get(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 la id no está funcionando en tu código.
Alternativamente, use el método attr de jQuery ya que otras respuestas sugieren obtener el atributo id del primer elemento coincidente.
$("#test").attr("id")
$(''tagname'').attr(''id'');
Usando el código anterior puede obtener ID.
$.fn.extend({
id : function() {
return this.attr(''id'');
}
});
alert( $(''#element'').id() );
Algún código de verificación requerido, por supuesto, pero fácilmente implementado!