jQuery: Obtener el nombre de la etiqueta del elemento seleccionado

641

¿Hay una manera fácil de obtener un nombre de etiqueta?

Por ejemplo, si tengo $('a')una función, quiero obtenerla 'a'.

javascript jquery jquery-selectors

— configurador
fuente

2

posible duplicado de ¿Tiene jQuery alguna función para determinar el tipo de etiqueta de los elementos DOM a los que hace referencia el objeto jQuery?

— Darko Z

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

62

A partir de jQuery 1.6, ahora debe llamar a prop:

$target.prop("tagName")

Ver http://api.jquery.com/prop/

— Robar
fuente

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