jQuery: Ruft den ausgewählten Element-Tag-Namen ab

Antworten:

1031

Sie können anrufen .prop("tagName"). Beispiele:

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


Wenn das Schreiben .prop("tagName")mühsam ist, können Sie eine benutzerdefinierte Funktion wie folgt erstellen:

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

Beispiele:

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


Beachten Sie, dass Tag-Namen gemäß Konvention CAPITALIZED zurückgegeben werden . Wenn der zurückgegebene Tag-Name nur in Kleinbuchstaben angegeben werden soll, können Sie die benutzerdefinierte Funktion folgendermaßen bearbeiten:

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

Beispiele:

jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"
tilleryj
quelle
18
Ab jQuery 1.6 sollte dies sein .prop.
Rocket Hazmat
3
Wird die Großschreibungskonvention von allen Browsern befolgt? Wenn nicht, normalisiert jQuery dies?
Callum
8
tagName ist Teil der DOM-Spezifikation und wird immer großgeschrieben.
tilleryj
Beachten Sie, dass sich die zurückgegebene Zeichenfolge in GROSSBUCHSTABEN befindet. Dies ist ein Problem, wenn Sie beispielsweise versuchen, es mit "div" oder "a" zu vergleichen.
Hartley Brody
3
Verwenden toLowerCase()oder toUpperCase()kann hilfreich sein, wenn Sie das prop('tagName')Ergebnis mit einem Tag-Namen vergleichen. if($("my_selector").prop("tagName").toLowerCase() == 'div')oderif($("my_selector").prop("tagName").toUpperCase() == 'DIV')
S.Thiongane
99

Sie können die nodeNameEigenschaft des DOM verwenden :

$(...)[0].nodeName
SLaks
quelle
Vielen Dank. Funktioniert hervorragend - obwohl ich die jQueryish-Version verwenden werde, weil ich mich gerade in einer jQuery-Welt befinde.
Konfigurator
6
reine JS-Lösungen (wie diese) sind jQuery-Lösungen im Allgemeinen überlegen, insbesondere wenn sie nicht unter Browserkompatibilitätsproblemen leiden oder viel ausführlicher sind.
Steven Lu
25
... und speziell aufgrund dieser Probleme mit der Browser-Inkompatibilität sind die jQuery-Probleme oft überlegen, wenn jemand eine Lösung auswählt und nicht genau weiß, auf welche Browser-Inkompatibilitäten zu achten ist. ;)
Scott Stafford
4
Ich halte dies für überlegen, da es egal ist, um welche jQuery-Version es sich handelt. Diese Lösung funktioniert auf allen Versionen. +1
Stijn de Witt
7
Insbesondere, wenn Sie sich in einer each () - ähnlichen Situation befinden, in der Sie das Element in ein jquery-Objekt zurücksetzen müssen, um eine Eigenschaft zu erhalten, die bereits vorhanden war $(this).prop('tagname'). this.nodeName ist oft effizienter. +1
Commonpike
46

jQuery 1.6+ 

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

ältere Versionen 

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

toLowerCase () ist nicht obligatorisch.

Dayron Gallardo
quelle
Warum machst new Stringdu
Rocket Hazmat
Weil toLowerCase () eine Methode von String
Dayron Gallardo
23

Dies ist ein weiterer Weg:

$('selector')[0].tagName
Chepech
quelle
Schön! Klarer als NodeName und noch kürzer. : P
Dennis98
11

Sie sollten NICHT verwenden jQuery('selector').attr("tagName").toLowerCase(), da es nur in älteren Versionen von Jquery funktioniert.

Sie können verwenden, $('selector').prop("tagName").toLowerCase()wenn Sie sicher sind, dass Sie eine Version von jQuery verwenden, die> = Version 1.6 ist.

Hinweis :

Sie denken vielleicht, dass JEDER jQuery 1.10+ oder etwas anderes verwendet (Januar 2016), aber leider ist das nicht wirklich der Fall. Beispielsweise verwenden heute noch viele Benutzer Drupal 7, und jede offizielle Version von Drupal 7 enthält bis heute standardmäßig jQuery 1.4.4.

Wenn Sie also nicht sicher sind, ob Ihr Projekt jQuery 1.6+ verwenden wird, sollten Sie eine der Optionen in Betracht ziehen, die für ALLE Versionen von jQuery funktionieren:

Option 1 :

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

Option 2 

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

nodeName gibt Ihnen den Tag-Namen in Großbuchstaben, während localName Ihnen den Kleinbuchstaben gibt.

$("yourelement")[0].localName

wird dir geben: dein Element statt DEINELEMENT

Donovan P.
quelle