jQuery: ottiene il nome del tag dell'elemento selezionato

641

C'è un modo semplice per ottenere un nome tag?

Ad esempio, se mi viene data $('a')una funzione, voglio ottenere 'a'.

javascript jquery jquery-selectors

— configuratore
fonte

2

possibile duplicato di jQuery ha qualche funzione per determinare il tipo di tag degli elementi DOM a cui fa riferimento l'oggetto jQuery?

— Darko Z

1032

Puoi chiamare .prop("tagName"). Esempi:

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

Se scrivere .prop("tagName")è noioso, puoi creare una funzione personalizzata in questo modo:

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

Esempi:

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

Si noti che i nomi dei tag vengono, per convenzione, restituiti in MAIUSCOLO . Se vuoi che il nome del tag restituito sia tutto minuscolo, puoi modificare la funzione personalizzata in questo modo:

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

Esempi:

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

— tilleryj
fonte

18

AS di jQuery 1.6, questo dovrebbe essere .prop.

— Rocket Hazmat,

3

La convenzione sulla capitalizzazione è seguita da tutti i browser? In caso contrario, jQuery lo normalizza?

— callum,

8

tagName fa parte delle specifiche DOM ed è sempre in maiuscolo.

— tilleryj,

Si noti che la stringa restituita è in LETTERE MAIUSCOLE. Questo sarà un gotcha se stai cercando di confrontarlo con "div" o "a" per esempio.

— Hartley Brody,

3

l'utilizzo toLowerCase()o toUpperCase()può essere utile quando si confronta il prop('tagName')risultato con un nome di tag. if($("my_selector").prop("tagName").toLowerCase() == 'div')oppureif($("my_selector").prop("tagName").toUpperCase() == 'DIV')

— S.Thiongane il

99

Puoi usare la nodeNameproprietà del DOM :

$(...)[0].nodeName

— SLaks
fonte

Grazie. Funziona benissimo, anche se al momento userò la versione più jQueryish perché sono in un mondo jQuery.

— configuratore

6

le soluzioni JS pure (come questa) sono generalmente superiori a quelle jQuery soprattutto se non soffrono di problemi di compatibilità del browser o sono molto più dettagliate.

— Steven Lu,

25

... e in particolare a causa di questi problemi di incompatibilità del browser, quelli di jQuery sono spesso superiori se qualcuno sta scegliendo una soluzione e non è esperto di quali incompatibilità del browser fare attenzione. ;)

— Scott Stafford,

4

Lo considero superiore perché non importa quale sia la versione jQuery, questa soluzione funziona su tutte le versioni. +1

— Stijn de Witt,

7

in particolare se ci si trova in una situazione simile a each (), in cui è necessario eseguire il cast dell'elemento su un oggetto jquery per ottenere una proprietà che era già lì, come $(this).prop('tagname'). this.nodeName è spesso più efficiente. +1

— commonpike,

62

A partire da jQuery 1.6 ora dovresti chiamare prop:

$target.prop("tagName")

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

— rapinare
fonte

46

jQuery 1.6+

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

Versioni precedenti

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

toLowerCase () non è obbligatorio.

— Dayron Gallardo
fonte

Perché lo stai facendo new String?

— Rocket Hazmat,

Perché toLowerCase () è un metodo di String

— Dayron Gallardo

23

Questo è ancora un altro modo:

$('selector')[0].tagName

— Chepech
fonte

Ben fatto! Più chiaro di nodeName e persino più corto. : P

— Dennis98,

11

NON dovresti usare jQuery('selector').attr("tagName").toLowerCase(), perché funziona solo con le versioni precedenti di Jquery.

È possibile utilizzare $('selector').prop("tagName").toLowerCase()se si è certi di utilizzare una versione di jQuery che è> = versione 1.6.

Nota :

Potresti pensare che TUTTI stiano usando jQuery 1.10+ o qualcosa del genere (gennaio 2016), ma sfortunatamente non è proprio così. Ad esempio, molte persone oggi usano ancora Drupal 7 e ogni versione ufficiale di Drupal 7 fino ad oggi include jQuery 1.4.4 per impostazione predefinita.

Quindi, se non sai con certezza se il tuo progetto utilizzerà jQuery 1.6+, puoi utilizzare una delle opzioni che funzionano con TUTTE le versioni di jQuery:

Opzione 1 :

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

opzione 2

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

— John Slegers
fonte

0

nodeName ti darà il nome del tag in maiuscolo, mentre localName ti darà il minuscolo.

$("yourelement")[0].localName

ti darà: yourelement invece di YOURELEMENT

— Donovan P
fonte