Чи може 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

відповідно.

Будь-які ідеї щодо того, як я можу виявити ім'я тегу елемента, представленого "this"?


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());

18
Вам потрібно буде використовувати this.nodeName.toLowerCase (), оскільки більшість представлених DOM представлень HTML-документів автоматично визначають великі регістри nodeName.
NickFitz

і цей.nodeName, і this.tagName, здається, працюють для мене. Дякую усім!
BigPigVT

5
+1 для згадування nodeName. Іноді jQuery за крок занадто далеко :-)
Серж Вотьє

2
+1 jQuery is () не виконує цю роботу, оскільки у випадку h1, h2 і т. Д. Є 6 різних випадків, з якими вам доведеться обробити, якщо використовується ().
Костянтин Дінев

166

Ви можете спробувати це:

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

Докладнішу інформацію див. У документах ().


12
Для кого це може стосуватися: якщо ви спростуєте мою відповідь, будь ласка, скажіть мені, чому я можу вдосконалити її та дізнатися про майбутні відповіді. Дякую.
середній час

3
Я це теж ненавиджу. У будь-якому разі я схвалив те, що nodeNameповертає рядок, який залежно від браузера має верхній регістр чи ні.
Марсель Фальєр,

2
Припустимо наступне: у вас не просто невеликий вибір можливих тегів, але це може бути будь-який із 100+ тегів html. Тоді вам потрібно буде написати: $ (this) .is ('sometag') 100+ разів. Я припускаю, що саме тому деякі люди спростували вашу відповідь.
ximi

Нічого ... ніколи не бачив is('*')у роках. Це, мабуть, не відповість на ОП, але це працювало для мене, дякую, @middus!
Аластер

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


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


0

Ім'я тега html-елемента можна отримати на всій сторінці.

Ви можете використовувати:

        $('body').contents().on("click",function () {
          var string = this.tagName;
          alert(string);
         });

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
Кріс С.

Ще один приклад використання: $('*').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()); 
  });
});
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.