jQuery: получить имя тега выбранного элемента

641

Есть ли простой способ получить имя тега?

Например, если мне дают $('a')функцию, я хочу получить 'a'.

javascript jquery jquery-selectors

2

Возможный дубликат Есть ли в jQuery какая-либо функция для определения типа тега элемента (ов) DOM, на который ссылается объект jQuery?

— Дарко Z

1032

Вы можете позвонить .prop("tagName"). Примеры:

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

Если писать .prop("tagName")утомительно, вы можете создать собственную функцию, например:

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

Примеры:

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

Обратите внимание, что имена тегов по соглашению возвращаются в CAPITALIZED . Если вы хотите, чтобы возвращаемое имя тега было строчным, вы можете отредактировать пользовательскую функцию следующим образом:

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

Примеры:

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

— tilleryj
источник

18

Начиная с jQuery 1.6, это должно быть .prop.

— Ракета Хазмат

3

Соглашение о капитализации соблюдается всеми браузерами? Если нет, нормализует ли это jQuery?

— Каллум

8

tagName является частью спецификации DOM и всегда с большой буквы.

— августа

Обратите внимание, что возвращаемая строка написана ЗАГЛАВНЫМИ БУКВАМИ. Это будет недоразумением, если вы попытаетесь сравнить его с "div" или "a", например.

— Хартли Броуди

3

Использование toLowerCase()или toUpperCase()может быть полезно при сравнении prop('tagName')результата с именем тега. if($("my_selector").prop("tagName").toLowerCase() == 'div')илиif($("my_selector").prop("tagName").toUpperCase() == 'DIV')

— Тионгане

99

Вы можете использовать nodeNameсвойство DOM :

$(...)[0].nodeName

— SLaks
источник

Спасибо. Прекрасно работает - хотя я буду использовать более jQueryish версию, потому что сейчас я нахожусь в мире jQuery.

— конфигуратор

6

Чистые решения JS (подобные этому), как правило, превосходят решения jQuery, особенно если они не страдают от проблем совместимости браузера или являются более многословными.

— Стивен Лу

25

... и, в частности, из-за проблем с несовместимостью браузеров, jQuery часто лучше, если кто-то выбирает решение и не очень хорошо разбирается в том, какие браузерные несовместимости нужно остерегаться. ;)

— Скотт Стаффорд

4

Я считаю это превосходным, потому что не имеет значения, какая версия jQuery, это решение работает на всех версиях. +1

— Стейн де Витт

7

особенно если вы находитесь в ситуации, подобной each (), где вам нужно привести элемент обратно к объекту jquery, чтобы получить свойство, которое уже было там, например $(this).prop('tagname'). this.nodeName часто более эффективен. +1

— обычная щука

62

Начиная с jQuery 1.6, теперь вы должны вызывать prop:

$target.prop("tagName")

Смотрите http://api.jquery.com/prop/

— обкрадывать
источник

46

JQuery 1.6+

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

Старые версии

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

toLowerCase () не является обязательным.

— Дайрон Галлардо
источник

Почему делаешь new String?

— Ракета Хазмат

Потому что toLowerCase () является методом String

— Дайрон Галлардо

23

Это еще один способ:

$('selector')[0].tagName

— Chepech
источник

Хороший! Четче, чем nodeName и даже короче. : P

— Dennis98

11

Вы должны НЕ использовать jQuery('selector').attr("tagName").toLowerCase(), потому что он работает только в старых версиях Jquery.

Вы можете использовать, $('selector').prop("tagName").toLowerCase()если уверены, что используете версию jQuery, которая> = версия 1.6.

Замечания :

Вы можете подумать, что КАЖДЫЙ сейчас использует jQuery 1.10+ или что-то еще (январь 2016 г.), но, к сожалению, это не совсем так. Например, многие люди сегодня все еще используют Drupal 7, и каждый официальный выпуск Drupal 7 по сей день включает в себя jQuery 1.4.4 по умолчанию.

Так что, если вы не знаете наверняка, будет ли ваш проект использовать jQuery 1.6+, рассмотрите возможность использования одного из вариантов, которые работают для ВСЕХ версий jQuery:

Опция 1 :

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

Вариант 2

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

— Джон Слегерс
источник

0

nodeName даст вам имя тега в верхнем регистре, а localName даст вам строчный.

$("yourelement")[0].localName

даст вам: вы вместо себя

— Донован П
источник