jQuery: obtém o nome da tag do elemento selecionado

641

Existe uma maneira fácil de obter um nome de tag?

Por exemplo, se eu for designado $('a')para uma função, quero obter 'a'.

javascript jquery jquery-selectors

— configurador
fonte

2

possível duplicata do jQuery tem alguma função para determinar o tipo de tag do (s) elemento (s) DOM (s) referenciado (s) pelo objeto jQuery?

— Darko Z

1032

Você pode ligar .prop("tagName"). Exemplos:

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

Se a gravação .prop("tagName")for entediante, você poderá criar uma função personalizada da seguinte maneira:

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

Exemplos:

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

Observe que os nomes das tags são, por convenção, retornados em maiúsculas . Se você quiser que o nome da tag retornado esteja em letras minúsculas, é possível editar a função personalizada da seguinte forma:

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

Exemplos:

jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"

— tilleryj
fonte

18

AS do jQuery 1.6, deve ser .prop.

— Rocket Hazmat

3

A convenção de capitalização é seguida por todos os navegadores? Caso contrário, o jQuery normaliza isso?

— Callum

8

tagName faz parte da especificação do DOM e é sempre maiúsculo.

— tilleryj

Observe que a string retornada está em LETRAS MAIÚSCULAS. Isso será um problema, se você estiver tentando compará-lo com "div" ou "a", por exemplo.

— Hartley Brody

3

usando toLowerCase()ou toUpperCase()pode ser útil ao comparar prop('tagName')resultado com um nome de tag. if($("my_selector").prop("tagName").toLowerCase() == 'div')ouif($("my_selector").prop("tagName").toUpperCase() == 'DIV')

— S.Thiongane 4/14

99

Você pode usar a nodeNamepropriedade do DOM :

$(...)[0].nodeName

— SLaks
fonte

Obrigado. Funciona muito bem - embora eu use a versão mais do jQueryish porque estou no mundo do jQuery no momento.

— Configurator

6

soluções JS puras (como esta) geralmente são superiores às jQuery, especialmente se elas não sofrem de problemas de compatibilidade do navegador ou são muito mais detalhadas.

— Steven Lu

25

... e especificamente por causa desses problemas de incompatibilidade do navegador, os do jQuery geralmente são superiores se alguém está escolhendo uma solução e não é bem versado em quais incompatibilidades do navegador devem ser observadas. ;)

— Scott Stafford

4

Considero isso superior porque não importa qual é a versão do jQuery, esta solução funciona em todas as versões. +1

— Stijn de Witt

7

particularmente se você estiver em uma situação de tipo cada (), em que é necessário converter o elemento de volta em um objeto jquery para obter uma propriedade que já estava lá, como $(this).prop('tagname'). this.nodeName geralmente é mais eficiente. 1

— Commonpike:

62

A partir do jQuery 1.6, você deve chamar prop:

$target.prop("tagName")

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

— Roubar
fonte

46

jQuery 1.6+

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

versões mais antigas

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

toLowerCase () não é obrigatório.

— Dayron Gallardo
fonte

Por que você está fazendo new String?

— Rocket Hazmat

Porque toLowerCase () é um método de Cadeia

— Dayron Gallardo

23

Esta é outra maneira:

$('selector')[0].tagName

— Chepech
fonte

Agradável! Mais claro que o nodeName e ainda mais curto. : P

— Dennis98

11

Você NÃO deve usar jQuery('selector').attr("tagName").toLowerCase(), porque ele funciona apenas em versões mais antigas do Jquery.

Você pode usar $('selector').prop("tagName").toLowerCase()se tiver certeza de que está usando uma versão do jQuery que é> = versão 1.6.

Nota :

Você pode pensar que TODOS já estão usando o jQuery 1.10+ ou algo assim (janeiro de 2016), mas infelizmente esse não é realmente o caso. Por exemplo, muitas pessoas hoje ainda estão usando o Drupal 7, e toda versão oficial do Drupal 7 até hoje inclui o jQuery 1.4.4 por padrão.

Portanto, se você não souber ao certo se o seu projeto usará o jQuery 1.6+, considere usar uma das opções que funcionam para TODAS as versões do jQuery:

Opção 1 :

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

opção 2

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

— John Slegers
fonte

0

nodeName fornecerá o nome da tag em maiúsculas, enquanto localName fornecerá a letra minúscula.

$("yourelement")[0].localName

lhe dará: seu elemento em vez de YOURELEMENT

— Donovan P
fonte