Czy jQuery może podać nazwę tagu?

115

Mam kilka elementów na stronie HTML, które mają tę samą klasę - ale są to różne typy elementów. Chcę znaleźć nazwę znacznika elementu, kiedy nad nimi zapętlam - ale .attr nie przyjmuje „znacznika” ani „zmiennej”.

Oto co mam na myśli. Rozważ te elementy na stronie:

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

Teraz chcę uruchomić coś takiego, aby upewnić się, że wszystkie moje elementy mają identyfikator, jeśli nie został on jeszcze zdefiniowany:

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

W rezultacie chciałbym, aby elementy H2 i H4 miały wtedy identyfikator

rndh2_1
rndh4_3

odpowiednio.

Jakieś pomysły, jak mogę znaleźć nazwę tagu elementu reprezentowanego przez „this”?

BigPigVT
źródło
1
Może odpowiedź jest tutaj: stackoverflow.com/a/8355251/271103
Hakan KOSE

Odpowiedzi:

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

Powinien być

$(this).attr("id", "rnd" + this.nodeName.toLowerCase() + "_" + i.toString());
Wabbitseason
źródło
18
Będziesz musiał użyć this.nodeName.toLowerCase (), ponieważ większość reprezentacji DOM dokumentów HTML automatycznie wielkimi literami nazwa_węzła.
NickFitz
Wydaje się, że zarówno this.nodeName, jak i this.tagName działają dla mnie. Dziękuje wszystkim!
BigPigVT
5
+1 za wspomnienie nodeName. Czasami jQuery jest o krok za daleko :-)
Serge Wautier,
2
+1 jQuery is () nie spełnia swojego zadania, ponieważ w przypadku h1, h2 itp. Istnieje 6 różnych przypadków, które musisz obsłużyć, jeśli używasz is ().
Konstantin Dinev
166

Możesz spróbować tego:

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

Zobacz dokumentację, aby uzyskać więcej informacji na temat is ().

middus
źródło
12
Do kogo to może dotyczyć: jeśli zgodzisz się z moją odpowiedzią, proszę powiedz mi dlaczego, abym mógł ją poprawić i nauczyć się przyszłych odpowiedzi SO. Dzięki.
middus
3
Ja też tego nienawidzę. W każdym razie zagłosowałem za głosem, ponieważ nodeNamezwraca ciąg, który w zależności od przeglądarki jest pisany wielkimi literami lub nie.
Marcel Falliere
2
Załóżmy, że: nie masz tylko niewielkiej liczby możliwych tagów, ale może to być dowolny z ponad 100 tagów html. Wtedy musiałbyś napisać: $ (this) .is ('someag') ponad 100 razy. Zakładam, że właśnie dlatego niektórzy ludzie zlekceważyli twoją odpowiedź.
ximi
Wow ... nigdy nie widziałem is('*')od lat. Prawdopodobnie nie odpowie na OP, ale zadziałało dla mnie, dzięki @middus!
Alastair
53

Ponieważ już raz trafiłem na to pytanie i nie pomogło mi to w moim przypadku (nie miałem this, ale zamiast tego miałem instancję selektora jQuery). Wywołanie get()dostaniesz element HTML, dzięki któremu możesz uzyskać nodeNamejak wspomniano powyżej.

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

lub

$('.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
Scott Kirkwood
źródło
1
pierwsza pomocna na stronie
Kogut.
47

Możesz również użyć, $(this).prop('tagName');jeśli używasz jQuery 1.6 lub nowszego.

Bijay Rungta
źródło
Właśnie tego potrzebowałem. W moim projekcie miałem pod ręką element jquery, ale nie oryginalny element HTML DOM. To działa dla mnie.
Gilthans
Myślę, że to jest dokładna odpowiedź, która odpowiada na to pytanie.
CodeTweetie,
3

Tak. Możesz użyć poniższego kodu:

this.tagName
fernando
źródło
1

Myślę, że nie można używać nodeNamew jQuery, ponieważ nodeName jest właściwością DOM, a samo jQuery nie ma ani nodeNamefunkcji, ani właściwości. Ale na podstawie respondenta, który jako pierwszy wspomniał o tych nodeNamesprawach, udało mi się rozwiązać problem w następujący sposób:

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

UWAGA: thistutaj jest obiekt jQuery.

Pomagać w przestępstwie
źródło
0

Ponieważ jest to pytanie, które pojawia się w Google przy użyciu zmiennej jquery jako pierwsze dziecko jako zapytania, opublikuję kolejny przykład:

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

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

Wynikiem jquery jest zmienna (wielka litera): P

Hein
źródło
0

Możesz uzyskać nazwę tagu elementu html na całej stronie.

Możesz użyć:

        $('body').contents().on("click",function () {
          var string = this.tagName;
          alert(string);
         });
user2029521
źródło
0
you can try:
jQuery(this).get(0).tagName;
or
jQuery(this).get(0).nodeName;

uwaga: zamień to na swój selektor (h1, h3 lub ...)

akbar amani
źródło
0

Napisałem go tylko dla innego numeru i pomyślałem, że może to pomóc również każdemu z was.

Stosowanie:

  • to znaczy onclick="_DOM_Trackr(this);"

Parametry:

  1. Obiekt DOM do śledzenia
  2. przełącznik powrotu / ostrzeżenia (opcjonalnie, domyślnie = alert)

Kod źródłowy:

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);
    }
}
Chris S.
źródło
Przykładowe dane wyjściowe:html > body > div#coreApp > div#productpage > div#productpage-wrapper > div > div > div > div > div#pthumb12 > form#thumb_uploader_src > input
Chris S.
Inny przykład użycia: $('*').each(function(_i,_e){$(_e).attr('title',_DOM_Trackr(_e,true));});
Chris S.
0

Najlepszym sposobem rozwiązania problemu jest zastąpienie $(this).attr("tag")go jednym this.nodeName.toLowerCase()lubthis.tagName.toLowerCase() .

Oba dają dokładnie ten sam wynik!

John Slegers
źródło
0

Rozważ szybką metodę FILTER :

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

zwroty:

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

więc:

$('.rnd').filter('h2,h4').each(function() { /*...$(this)...*/ });
Francesco Casula
źródło
0

Zamiast tego po prostu zrób:

$(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()); 
  });
});
Alireza
źródło