jQuery: Uzyskaj nazwę wybranego elementu

Odpowiedzi:

1032

Można zadzwonić .prop("tagName"). Przykłady:

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


Jeśli pisanie .prop("tagName")jest uciążliwe, możesz utworzyć niestandardową funkcję, taką jak:

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

Przykłady:

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


Zauważ, że nazwy tagów, zgodnie z konwencją, są WIELKIEGO LITERA . Jeśli chcesz, aby zwracana nazwa znacznika składała się wyłącznie z małych liter, możesz edytować funkcję niestandardową w następujący sposób:

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

Przykłady:

jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"
tilleryj
źródło
18
W wersji jQuery 1.6 powinno to być .prop.
Rocket Hazmat
3
Czy wszystkie konwencje przeglądarki stosują konwencję wielkich liter? Jeśli nie, to czy jQuery to normalizuje?
callum
8
tagName jest częścią specyfikacji DOM i zawsze jest wielka.
tilleryj
Zwróć uwagę, że zwracany ciąg jest w LITERACH KAPITALNYCH. To będzie problem, jeśli spróbujesz porównać go na przykład do „div” lub „a”.
Hartley Brody
3
użycie toLowerCase()lub toUpperCase()może być pomocne przy porównywaniu prop('tagName')wyniku z nazwą znacznika. if($("my_selector").prop("tagName").toLowerCase() == 'div')lubif($("my_selector").prop("tagName").toUpperCase() == 'DIV')
S.Thiongane
99

Można użyć DOM na nodeNamewłasność :

$(...)[0].nodeName
SLaks
źródło
Dzięki. Działa świetnie - chociaż użyję bardziej wersji jQueryish, ponieważ jestem obecnie w świecie jQuery.
konfigurator
6
rozwiązania czysto JS (takie jak to) są na ogół lepsze od rozwiązań jQuery, zwłaszcza jeśli nie mają problemów ze zgodnością przeglądarki lub są znacznie bardziej szczegółowe.
Steven Lu,
25
... a szczególnie z powodu problemów z niekompatybilnością przeglądarki, jQuery są często lepsze, jeśli ktoś wybiera rozwiązanie i nie jest dobrze zorientowany, na jakie niezgodności przeglądarki należy uważać. ;)
Scott Stafford,
4
Uważam to za lepsze, ponieważ nie ma znaczenia, jaka jest wersja jQuery, to rozwiązanie działa na wszystkich wersjach. +1
Stijn de Witt
7
szczególnie jeśli znajdujesz się w sytuacji podobnej do każdego (), w której musisz rzucić element z powrotem na obiekt jquery, aby uzyskać właściwość, która już tam była, na przykład $(this).prop('tagname'). this.nodeName jest często bardziej wydajny. +1
commonpike
46

jQuery 1.6+ 

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

starsza wersja 

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

toLowerCase () nie jest obowiązkowe.

Dayron Gallardo
źródło
Dlaczego to robisz new String?
Rocket Hazmat
Ponieważ toLowerCase () jest metodą String
Dayron Gallardo,
23

To jeszcze inny sposób:

$('selector')[0].tagName
Chepech
źródło
Niezłe! Czystszy niż nodeName, a nawet krótszy. : P
Dennis98,
11

NIE powinieneś używać jQuery('selector').attr("tagName").toLowerCase(), ponieważ działa tylko w starszych wersjach Jquery.

Państwo mogli skorzystać $('selector').prop("tagName").toLowerCase(), jeśli jesteś pewien, że używasz wersji ów jQuery> = wersja 1.6.

Uwaga :

Możesz myśleć, że KAŻDY używa jQuery 1.10+ lub czegoś takiego (styczeń 2016), ale niestety tak nie jest. Na przykład wiele osób nadal korzysta z Drupala 7, a każde oficjalne wydanie Drupala 7 do dziś zawiera domyślnie jQuery 1.4.4.

Więc jeśli nie wiesz na pewno, czy twój projekt będzie korzystał z jQuery 1.6+, rozważ skorzystanie z jednej z opcji, które działają dla WSZYSTKICH wersji jQuery:

Opcja 1 :

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

Opcja 2 

jQuery('selector')[0].nodeName.toLowerCase()
John Slegers
źródło
0

nodeName poda nazwę znacznika dużymi literami, a localName małą literą.

$("yourelement")[0].localName

da ci: relację zamiast YOURELEMENT

Donovan P.
źródło