jQuery: Obtener el nombre de la etiqueta del elemento seleccionado

Respuestas:

1032

Puede llamar .prop("tagName"). Ejemplos:

jQuery("<a>").prop("tagName"); //==> "A"
jQuery("<h1>").prop("tagName"); //==> "H1"
jQuery("<coolTagName999>").prop("tagName"); //==> "COOLTAGNAME999"


Si escribir .prop("tagName")es tedioso, puede crear una función personalizada como esta:

jQuery.fn.tagName = function() {
  return this.prop("tagName");
};

Ejemplos:

jQuery("<a>").tagName(); //==> "A"
jQuery("<h1>").tagName(); //==> "H1"
jQuery("<coolTagName999>").tagName(); //==> "COOLTAGNAME999"


Tenga en cuenta que los nombres de etiqueta son, por convención, devueltos CAPITALIZADOS . Si desea que el nombre de la etiqueta devuelta esté en minúsculas, puede editar la función personalizada de la siguiente manera:

jQuery.fn.tagNameLowerCase = function() {
  return this.prop("tagName").toLowerCase();
};

Ejemplos:

jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"
tilleryj
fuente
18
A partir de jQuery 1.6, esto debería ser .prop.
Rocket Hazmat
3
¿La convención de capitalización es seguida por todos los navegadores? Si no, ¿jQuery normaliza esto?
callum
8
tagName es parte de la especificación DOM y siempre está en mayúscula.
tilleryj
Tenga en cuenta que la cadena que se devuelve está en LETRAS MAYÚSCULAS. Esto será un problema si intentas compararlo con "div" o "a", por ejemplo.
Hartley Brody
3
usar toLowerCase()o toUpperCase()puede ser útil al comparar el prop('tagName')resultado con el nombre de una etiqueta. if($("my_selector").prop("tagName").toLowerCase() == 'div')oif($("my_selector").prop("tagName").toUpperCase() == 'DIV')
S. Thhiongane
99

Puede usar la nodeNamepropiedad del DOM :

$(...)[0].nodeName
SLaks
fuente
Gracias. Funciona muy bien, aunque usaré la versión más jQueryish porque estoy en un mundo jQuery en este momento.
configurador
66
Las soluciones JS puras (como esta) son generalmente superiores a las jQuery, especialmente si no sufren problemas de compatibilidad del navegador o son mucho más detalladas.
Steven Lu
25
... y específicamente debido a esos problemas de incompatibilidad del navegador, los de jQuery a menudo son superiores si alguien elige una solución y no está bien versado en las incompatibilidades del navegador a tener en cuenta. ;)
Scott Stafford
44
Considero que es superior porque no importa cuál sea la versión de jQuery, esta solución funciona en todas las versiones. +1
Stijn de Witt
77
particularmente si se encuentra en una situación de cada uno (), donde tiene que convertir el elemento en un objeto jquery para obtener una propiedad que ya estaba allí, como $(this).prop('tagname'). this.nodeName es a menudo más eficiente. +1
commonpike
46

jQuery 1.6+ 

jQuery('selector').prop("tagName").toLowerCase()

versiones anteriores 

jQuery('selector').attr("tagName").toLowerCase()

toLowerCase () no es obligatorio.

Dayron Gallardo
fuente
¿Por qué haces new String?
Rocket Hazmat
Porque toLowerCase () es un método de String
Dayron Gallardo
23

Esta es otra forma más:

$('selector')[0].tagName
Chepech
fuente
¡Buena esa! Más claro que nodeName e incluso más corto. : P
Dennis98
11

NO deberías usarjQuery('selector').attr("tagName").toLowerCase() , porque solo funciona en versiones anteriores de Jquery.

Usted podría utilizar $('selector').prop("tagName").toLowerCase()si está seguro de que está utilizando una versión de jQuery eso es> = versión 1.6.

Nota :

Puede pensar que TODOS están usando jQuery 1.10+ o algo por el momento (enero de 2016), pero desafortunadamente ese no es realmente el caso. Por ejemplo, muchas personas hoy en día todavía usan Drupal 7, y cada versión oficial de Drupal 7 hasta el día de hoy incluye jQuery 1.4.4 de forma predeterminada.

Entonces, si no sabe con certeza si su proyecto usará jQuery 1.6+, considere usar una de las opciones que funcionan para TODAS las versiones de jQuery:

Opción 1 :

jQuery('selector')[0].tagName.toLowerCase()

opcion 2 

jQuery('selector')[0].nodeName.toLowerCase()
John Slegers
fuente
0

nodeName le dará el nombre de la etiqueta en mayúscula, mientras que localName le dará la letra minúscula.

$("yourelement")[0].localName

te dará: turelemento en lugar de YOURELEMENT

Donovan P
fuente