jQuery: obtenir le nom de balise d'élément sélectionné

Réponses:

1032

Vous pouvez appeler .prop("tagName"). Exemples:

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


Si l'écriture .prop("tagName")est fastidieuse, vous pouvez créer une fonction personnalisée comme ceci:

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

Exemples:

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


Notez que les noms de balises sont, par convention, retournés CAPITALISÉS . Si vous souhaitez que le nom de balise renvoyé soit entièrement en minuscules, vous pouvez modifier la fonction personnalisée comme suit:

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

Exemples:

jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"
tilleryj
la source
18
Comme pour jQuery 1.6, cela devrait l'être .prop.
Rocket Hazmat
3
La convention de capitalisation est-elle suivie par tous les navigateurs? Sinon, jQuery normalise-t-il cela?
callum
8
tagName fait partie de la spécification DOM et est toujours en majuscule.
tilleryj
Notez que la chaîne renvoyée est en LETTRES MAJUSCULES. Ce sera un piège si vous essayez de le comparer à "div" ou "a" par exemple.
Hartley Brody
3
utiliser toLowerCase()ou toUpperCase()peut être utile pour comparer le prop('tagName')résultat à un nom de balise. if($("my_selector").prop("tagName").toLowerCase() == 'div')ouif($("my_selector").prop("tagName").toUpperCase() == 'DIV')
S.Thiongane
99

Vous pouvez utiliser la nodeNamepropriété du DOM :

$(...)[0].nodeName
SLaks
la source
Merci. Fonctionne très bien - même si j'utiliserai la version plus jQueryish parce que je suis dans un monde jQuery en ce moment.
configurateur
6
les solutions JS pures (comme celle-ci) sont généralement supérieures aux solutions jQuery, surtout si elles ne souffrent pas de problèmes de compatibilité du navigateur ou sont beaucoup plus verbeuses.
Steven Lu
25
... et en particulier à cause de ces problèmes d'incompatibilité de navigateur, ceux de jQuery sont souvent supérieurs si quelqu'un choisit une solution et n'est pas bien informé des incompatibilités de navigateur à surveiller. ;)
Scott Stafford
4
Je considère cela comme supérieur car peu importe la version de jQuery, cette solution fonctionne sur toutes les versions. +1
Stijn de Witt
7
en particulier si vous êtes dans une situation de type each (), où vous devez convertir l'élément en un objet jquery pour obtenir une propriété qui était déjà là, comme $(this).prop('tagname'). this.nodeName est souvent plus efficace. +1
commonpike
46

jQuery 1.6+ 

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

Versions plus anciennes 

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

toLowerCase () n'est pas obligatoire.

Dayron Gallardo
la source
Pourquoi fais - tu new String?
Rocket Hazmat
Parce que toLowerCase () est une méthode de String
Dayron Gallardo
23

C'est encore une autre façon:

$('selector')[0].tagName
Chepech
la source
Joli! Plus clair que nodeName et encore plus court. : P
Dennis98
11

Vous ne devez PAS l' utiliser jQuery('selector').attr("tagName").toLowerCase(), car il ne fonctionne que dans les anciennes versions de Jquery.

Vous pouvez utiliser $('selector').prop("tagName").toLowerCase()si vous êtes certain d'utiliser une version de jQuery qui est> = version 1.6.

Remarque :

Vous pensez peut-être que TOUT LE MONDE utilise jQuery 1.10+ ou quelque chose comme ça (janvier 2016), mais malheureusement ce n'est pas vraiment le cas. Par exemple, de nombreuses personnes utilisent encore Drupal 7 aujourd'hui, et chaque version officielle de Drupal 7 à ce jour inclut par défaut jQuery 1.4.4.

Donc, si vous ne savez pas avec certitude si votre projet utilisera jQuery 1.6+, envisagez d'utiliser l'une des options qui fonctionnent pour TOUTES les versions de jQuery:

Option 1 :

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

Option 2 

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

nodeName vous donnera le nom de la balise en majuscule, tandis que localName vous donnera la minuscule.

$("yourelement")[0].localName

vous donnera: votre élément au lieu de VOTRE ÉLÉMENT

Donovan P
la source