jQuery: Uzyskaj nazwę wybranego elementu

641

Czy istnieje prosty sposób na uzyskanie nazwy znacznika?

Na przykład, jeśli dostanę $('a')funkcję, chcę ją uzyskać 'a'.

javascript jquery jquery-selectors

— konfigurator
źródło

2

możliwy duplikat Czy jQuery ma jakąkolwiek funkcję określającą typ znacznika elementów DOM, do których odwołuje się obiekt jQuery?

— Darko Z

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

62

Od wersji jQuery 1.6 powinieneś teraz wywołać prop:

$target.prop("tagName")

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

— Obrabować
źródło

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