Может ли jQuery предоставить имя тега?

115

У меня есть несколько элементов на странице HTML, которые имеют один и тот же класс, но это разные типы элементов. Я хочу узнать имя тега элемента, когда я перебираю их, но .attr не принимает «тег» или «имя тега».

Вот что я имею в виду. Рассмотрим эти элементы на странице:

<h1 class="rnd">First</h1>
<h2 id="foo" class="rnd">Second</h2>
<h3 class="rnd">Third</h3>
<h4 id="bar" class="rnd">Fourth</h4>

Теперь я хочу запустить что-то вроде этого, чтобы убедиться, что все мои элементы имеют идентификатор, если он еще не определен:

$(function() {
  $(".rnd").each(function(i) {
    var id = $(this).attr("id");
    if (id === undefined || id.length === 0) {
      // this is the line that's giving me problems.
      // .attr("tag") returns undefined
      $(this).attr("id", "rnd" + $(this).attr("tag") + "_" + i.toString());
    }
  });
});

В результате я бы хотел, чтобы элементы H2 и H4 имели идентификатор

rndh2_1
rndh4_3

соответственно.

Есть идеи о том, как я могу узнать имя тега элемента, представленного «этим»?

BigPigVT
источник
1
Может быть, ответ здесь: stackoverflow.com/a/8355251/271103
Hakan KOSE

Ответы:

110
$(this).attr("id", "rnd" + $(this).attr("tag") + "_" + i.toString());

должно быть

$(this).attr("id", "rnd" + this.nodeName.toLowerCase() + "_" + i.toString());
Wabbitseason
источник
18
Вам нужно будет использовать this.nodeName.toLowerCase (), так как большинство DOM-представлений HTML-документов автоматически заглавные буквы nodeName.
NickFitz,
как this.nodeName, так и this.tagName, похоже, работают для меня. Спасибо всем!
BigPigVT, 07
5
+1 за упоминание nodeName. Иногда jQuery - это слишком далеко :-)
Серж Вотье 05
2
+1 jQuery is () не выполняет эту работу, потому что в случае h1, h2 и т. Д. Существует 6 различных случаев, которые вам нужно обработать при использовании is ().
Константин Динев
166

Вы можете попробовать это:

if($(this).is('h1')){
  doStuff();
}

Дополнительную информацию об is () см. В документации .

middus
источник
12
Кого это может касаться: если вы проголосуете против моего ответа, скажите, почему, чтобы я мог улучшить его и изучить для будущих SO-ответов. Спасибо.
миддус
3
Я тоже это ненавижу. В любом случае я проголосовал за, потому что nodeNameвозвращает строку, которая, в зависимости от браузера, имеет верхний регистр или нет.
Марсель Фальер,
2
Предположим следующее: у вас есть не просто небольшой набор возможных тегов, но это может быть любой из 100+ тегов html. Затем вам нужно будет написать: $ (this) .is ('sometag') более 100 раз. Я предполагаю, что именно поэтому некоторые люди проголосовали против вашего ответа.
ximi 01
Вау ... ни разу не видел is('*'). Вероятно, он не ответит на OP, но у меня это сработало, спасибо, @middus!
Alastair
53

Поскольку я уже задавал этот вопрос раньше, и в моем случае это не помогло (у меня не было this, а вместо этого был экземпляр селектора jQuery). При вызове get()вы получите элемент HTML, с помощью которого вы можете получить, nodeNameкак указано выше.

this.nodeName; // In a event handler, 'this' is usually the element the event is called on

или

$('.hello:first-child').get(0).nodeName; // Use 'get' or simply access the jQuery Object like an array
$('.hello:first-child')[0].nodeName;     // will get you the original DOM element object
Скотт Кирквуд
источник
1
первый полезный на странице
Петух
47

Вы также можете использовать, $(this).prop('tagName');если используете jQuery 1.6 или выше.

Биджай Рунгта
источник
Это именно то, что мне нужно. В моем дизайне у меня был удобный элемент jquery, но не исходный элемент HTML DOM. У меня это работает.
Gilthans
Я думаю, что это точный ответ, который отвечает на этот вопрос.
CodeTweetie
3

Да. Вы можете использовать приведенный ниже код:

this.tagName
Фернанду
источник
1

Я думаю, что вы не можете использовать nodeNameв jQuery, поскольку nodeName является свойством DOM, а сам jQuery не имеет ни nodeNameфункции, ни свойства. Но, судя по nodeNameсловам респондента, который первым упомянул об этом , я смог решить проблему следующим образом:

this.attr("id", "rnd" + this.attr("nodeName") + "_" + i.toString());

НОТА: this вот объект jQuery.

подстрекать
источник
0

Поскольку это вопрос, который вы задаете в Google, используя jquery tagname first child в качестве запроса, я опубликую еще один пример:

<div><p>Some text, whatever</p></div>

$('div').children(':first-child').get(0).tagName); // ...and not $('div:first-child')[...]

Результатом jquery является тэг (в верхнем регистре): P

Hein
источник
0

Вы можете получить имя тега элемента html на всей странице.

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

        $('body').contents().on("click",function () {
          var string = this.tagName;
          alert(string);
         });
user2029521
источник
0
you can try:
jQuery(this).get(0).tagName;
or
jQuery(this).get(0).nodeName;

примечание: замените его на свой селектор (h1, h3 или ...)

Акбар Амани
источник
0

Я только что написал это для другого выпуска и подумал, что это может помочь любому из вас.

Использование:

  • т.е. onclick="_DOM_Trackr(this);"

Параметры:

  1. DOM-объект для трассировки
  2. переключатель возврата / предупреждения (необязательно, по умолчанию = предупреждение)

Исходный код:

function _DOM_Trackr(_elem,retn=false)
{
    var pathTrackr='';
    var $self=$(_elem).get(0);
    while($self && $self.tagName)
    {
        var $id=($($self).attr("id"))?('#'+$($self).attr("id")):'';
        var $nName=$self.tagName;
        pathTrackr=($nName.toLowerCase())+$id+((pathTrackr=='')?'':' > '+(pathTrackr));
        $self=$($self).parent().get(0);
    }
    if (retn)
    {
        return pathTrackr;
    }
    else
    {
        alert(pathTrackr);
    }
}
Крис С.
источник
Пример вывода:html > body > div#coreApp > div#productpage > div#productpage-wrapper > div > div > div > div > div#pthumb12 > form#thumb_uploader_src > input
Chris S.
Другой пример использования: $('*').each(function(_i,_e){$(_e).attr('title',_DOM_Trackr(_e,true));});
Крис С.
0

Лучший способ решить вашу проблему - заменить $(this).attr("tag")на this.nodeName.toLowerCase()или this.tagName.toLowerCase().

Оба дают одинаковый результат!

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

Рассмотрим быстрый метод ФИЛЬТРА :

$('.rnd').filter('h2,h4')

возвращает:

[<h2 id=​"foo" class=​"rnd">​Second​</h2>​, <h4 id=​"bar" class=​"rnd">​Fourth​</h4>​]

так:

$('.rnd').filter('h2,h4').each(function() { /*...$(this)...*/ });
Франческо Казула
источник
0

Вместо этого просто выполните:

$(function() {
  $(".rnd").each(function(i) {
    var id = $(this).attr("id");
    if (id === undefined || id.length === 0) {
      // this is the line that's giving me problems.
      // .attr("tag") returns undefined
      // change the below line...
      $(this).attr("id", "rnd" + this.tagName.toLowerCase() + "_" + i.toString()); 
  });
});
Алиреза
источник