jQuery: Отримайте назву вибраного тегу елемента


641

Чи є простий спосіб отримати ім’я тегу?

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


Відповіді:


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"


Зауважте, що імена тегів, як правило, повертаються КАПІТАЛІЗОВАНО . Якщо ви хочете, щоб ім'я, яке повертається, було великим регістром, ви можете відредагувати власну функцію так:

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

Приклади:

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

18
Що стосується jQuery 1.6, це має бути .prop.
Ракета Hazmat

3
Чи дотримуються правила перегляду капіталізації всі веб-переглядачі? Якщо ні, чи нормалізує це jQuery?
callum

8
tagName є частиною специфікації DOM і завжди пишеться з великої літери.
tilleryj

Зауважте, що рядок, що повертається, знаходиться у КАПІТАЛЬНИХ ПІСЛЯХ. Це буде виклик, якщо ви намагаєтеся порівняти його наприклад з "div" або "a".
Хартлі Броди

3
використання toLowerCase()або toUpperCase()може бути корисним при порівнянні prop('tagName')результату з назвою тегу. if($("my_selector").prop("tagName").toLowerCase() == 'div')абоif($("my_selector").prop("tagName").toUpperCase() == 'DIV')
S.Thiongane

99

Ви можете використовувати nodeNameвластивість DOM :

$(...)[0].nodeName

Дякую. Працює чудово - хоча я буду використовувати більше jQueryish версію, тому що зараз я в світі jQuery.
конфігуратор

6
чисті рішення JS (як це) в цілому перевершують рішення jQuery, особливо якщо вони не страждають від проблем сумісності браузера або набагато більш деталізовані.
Стівен Лу

25
... а саме через ці проблеми з сумісністю браузера, jQuery часто перевершує, якщо хтось підбирає рішення і недостатньо добре розбирається в тому, на які несумісність браузера слідкувати. ;)
Скотт Стаффорд

4
Я вважаю це вищим, оскільки не має значення, яка версія jQuery, це рішення працює на всіх версіях. +1
Штійн де Вітт

7
особливо, якщо ви знаходитесь у ситуації, схожій на кожну (), коли вам потрібно повернути елемент назад до об'єкта jquery, щоб отримати властивість, яка вже була там $(this).prop('tagname'). this.nodeName часто є більш ефективним. +1
звичайний спік



23

Це ще один спосіб:

$('selector')[0].tagName

Хороший! Чіткіше, ніж nodeName і навіть коротше. : P
Dennis98

11

НЕ слід використовувати jQuery('selector').attr("tagName").toLowerCase(), тому що він працює лише в старих версіях Jquery.

Ви можете використовувати, $('selector').prop("tagName").toLowerCase()якщо ви впевнені, що використовуєте версію jQuery thats> = версія 1.6.


Примітка :

Ви можете подумати, що до цього часу (січень 2016 року) КОЖНО використовує jQuery 1.10 або більше, але, на жаль, це насправді не так. Наприклад, багато людей сьогодні все ще використовують 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 

дасть вам: вивідповідальність замість ВАШОГО

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.