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
обычная щука
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

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

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