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

Respostas:

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:
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