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

641

Existe-t-il un moyen simple d'obtenir un nom de tag?

Par exemple, si on me donne $('a')une fonction, je veux l'obtenir 'a'.

javascript jquery jquery-selectors

— configurateur
source

2

doublon possible de jQuery a-t-il une fonction pour déterminer le type de balise des éléments DOM référencés par l'objet jQuery?

— Darko Z

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

62

Depuis jQuery 1.6, vous devez maintenant appeler prop:

$target.prop("tagName")

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

— Rob
source

46

jQuery 1.6+

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

Versions plus anciennes

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

toLowerCase () n'est pas obligatoire.

— Dayron Gallardo
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
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
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
source