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

640

Gibt es eine einfache Möglichkeit, einen Tag-Namen zu erhalten?

Wenn ich zum Beispiel $('a')in eine Funktion gegeben werde, möchte ich bekommen 'a'.

javascript jquery jquery-selectors

— Konfigurator
quelle

2

Mögliches Duplikat von Hat jQuery eine Funktion zum Bestimmen des Tag-Typs der DOM-Elemente, auf die vom jQuery-Objekt verwiesen wird?

— Darko Z

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

62

Ab jQuery 1.6 sollten Sie jetzt prop aufrufen:

$target.prop("tagName")

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

— rauben
quelle

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