Kann jQuery den Tag-Namen angeben?


115

Ich habe mehrere Elemente auf einer HTML-Seite, die dieselbe Klasse haben - aber sie sind unterschiedliche Elementtypen. Ich möchte den Tag-Namen des Elements herausfinden, während ich sie durchlaufe - aber .attr akzeptiert nicht "Tag" oder "Tagname".

Hier ist was ich meine. Betrachten Sie diese Elemente auf einer Seite:

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

Jetzt möchte ich so etwas ausführen, um sicherzustellen, dass meine Elemente alle eine ID haben, wenn noch keine definiert wurde:

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

Das Ergebnis, das ich möchte, wäre, dass die H2- und H4-Elemente dann eine ID von haben würden

rndh2_1
rndh4_3

beziehungsweise.

Irgendwelche Ideen, wie ich den Tag-Namen des durch "this" dargestellten Elements ermitteln kann?


1
Vielleicht ist die Antwort hier: stackoverflow.com/a/8355251/271103
Hakan KOSE

Antworten:


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

sollte sein

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

18
Sie müssen this.nodeName.toLowerCase () verwenden, da die meisten DOM-Darstellungen von HTML-Dokumenten den Knotennamen automatisch in Großbuchstaben schreiben.
NickFitz

Sowohl this.nodeName als auch this.tagName scheinen für mich zu funktionieren. Vielen Dank an alle!
BigPigVT

5
+1 für die Erwähnung von NodeName. Manchmal ist jQuery einen Schritt zu weit :-)
Serge Wautier

2
+1 jQuery is () erledigt den Job nicht, da im Fall von h1, h2 usw. 6 verschiedene Fälle behandelt werden müssen, wenn is () verwendet wird.
Konstantin Dinev

166

Sie könnten dies versuchen:

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

Weitere Informationen zu is () finden Sie in den Dokumenten .


12
Wen es betrifft: Wenn Sie meine Antwort ablehnen, sagen Sie mir bitte, warum, damit ich sie verbessern und für zukünftige SO-Antworten lernen kann. Vielen Dank.
Middus

3
Ich hasse es auch. Wie auch immer, ich habe upvoted, weil nodeNameeine Zeichenfolge zurückgegeben wird, die je nach Browser in Großbuchstaben geschrieben ist oder nicht.
Marcel Falliere

2
Nehmen Sie Folgendes an: Sie haben nicht nur eine kleine Auswahl möglicher Tags, sondern es können auch mehr als 100 HTML-Tags sein. Dann müssten Sie schreiben: $ (this) .is ('sometag') mehr als 100 Mal. Ich nehme an, aus diesem Grund haben einige Leute Ihre Antwort abgelehnt.
Ximi

Wow ... seit Jahren nie mehr gesehen is('*'). Es wird wahrscheinlich nicht auf das OP antworten, aber es hat bei mir funktioniert, danke, @middus!
Alastair

53

Da ich diese Frage schon einmal gestellt habe und sie mir in meinem Fall nicht geholfen hat (ich hatte keine this, sondern eine jQuery-Selektorinstanz). Wenn get()Sie aufrufen , erhalten Sie das HTML-Element, mit dem Sie das nodeNameoben erwähnte Element abrufen können .

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

oder

$('.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
erste hilfreiche auf der Seite
Rooster

47

Sie können es auch verwenden, $(this).prop('tagName');wenn Sie jQuery 1.6 oder höher verwenden.


Genau das brauchte ich. In meinem Design hatte ich das jquery-Element zur Hand, aber nicht das ursprüngliche HTML-DOM-Element. Das funktioniert bei mir.
Gilthans

Ich denke, dies ist die genaue Antwort, die das Thema dieser Frage beantwortet.
CodeTweetie

3

Ja. Sie können den folgenden Code verwenden:

this.tagName

1

Ich denke, Sie können das nodeNamein jQuery nicht verwenden, da nodeName eine DOM-Eigenschaft ist und jQuery selbst weder eine nodeNameFunktion noch eine Eigenschaft hat. Aber basierend auf dem Befragten, der das erste Mal über dieses nodeNameZeug gesprochen hat, konnte ich das Problem auf folgende Weise lösen:

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

HINWEIS: thisHier ist ein jQuery-Objekt.


0

Da dies eine Frage ist, die Sie bei Google mit dem ersten Kind von jquery tagname als Abfrage beantworten, werde ich ein weiteres Beispiel veröffentlichen:

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

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

Das jquery-Ergebnis ist ein (Groß-) Tagname: P.


0

Sie können den Namen des HTML-Element-Tags auf der gesamten Seite abrufen.

Du könntest benutzen:

        $('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;

Hinweis: Ersetzen Sie diesen durch Ihren Selektor (h1, h3 oder ...)


0

Ich habe es gerade erst für eine andere Ausgabe geschrieben und dachte, es könnte auch einem von euch helfen.

Verwendung:

  • dh onclick="_DOM_Trackr(this);"

Parameter:

  1. DOM-Objekt zu verfolgen
  2. Rückkehr- / Alarmschalter (optional, Standard = Alarm)

Quellcode:

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

Beispielausgabe:html > body > div#coreApp > div#productpage > div#productpage-wrapper > div > div > div > div > div#pthumb12 > form#thumb_uploader_src > input
Chris S.

Ein weiteres Anwendungsbeispiel: $('*').each(function(_i,_e){$(_e).attr('title',_DOM_Trackr(_e,true));});
Chris S.

0

Der beste Weg, um Ihr Problem zu beheben, ist das Ersetzen $(this).attr("tag")durch entweder this.nodeName.toLowerCase()oder this.tagName.toLowerCase().

Beide liefern genau das gleiche Ergebnis!


0

Betrachten Sie die schnelle FILTER- Methode:

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

kehrt zurück:

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

so:

$('.rnd').filter('h2,h4').each(function() { /*...$(this)...*/ });

0

Tun Sie stattdessen einfach:

$(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()); 
  });
});
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.