JQuery etiket adını sağlayabilir mi?


115

Bir HTML sayfasında aynı sınıfa sahip birkaç öğe var - ama bunlar farklı öğe türleri. Öğenin etiket adını, üzerlerinde dönerken bulmak istiyorum - ancak .attr "etiket" veya "etiket adı" almıyor.

İşte demek istediğim. Bir sayfadaki şu unsurları düşünün:

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

Şimdi, önceden tanımlanmamış öğelerimin hepsinin bir kimliği olmasını sağlamak için buna benzer bir şey çalıştırmak istiyorum:

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

İstediğim sonuç, H2 ve H4 öğelerinin bir id'sinin olması olacaktır.

rndh2_1
rndh4_3

sırasıyla.

"Bu" ile temsil edilen öğenin etiket adını nasıl keşfedebileceğime dair bir fikriniz var mı?


Yanıtlar:


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

olmalı

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

18
HTML belgelerinin DOM temsillerinin çoğu nodeName'i otomatik olarak büyük harflerle yazdığından this.nodeName.toLowerCase () kullanmanız gerekir.
NickFitz

hem this.nodeName hem de this.tagName benim için çalışıyor gibi görünüyor. Hepinize teşekkürler!
BigPigVT

5
NodeName'den bahsedilmesi için +1. Bazen, jQuery bir adım fazla ileri
gider

2
+1 jQuery is () işi yapmaz çünkü h1, h2 vb. Durumunda is () kullanılıyorsa halletmeniz gereken 6 farklı durum vardır.
Konstantin Dinev

166

Bunu deneyebilirsin:

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

İs () hakkında daha fazla bilgi için dokümanlara bakın .


12
Kimi ilgilendirebilir: Cevabımı olumsuz oylarsanız, lütfen bana nedenini söyleyin, böylece onu iyileştirebilir ve gelecekteki SO cevaplarını öğrenebilirim. Teşekkürler.
middus

3
Ben de nefret ediyorum. Her neyse, oy verdim çünkü nodeNametarayıcıya bağlı olarak büyük harfli olan veya olmayan bir dize döndürür.
Marcel Falliere

2
Aşağıdakileri varsayalım: Sadece küçük bir olası etiket seçimine sahip değilsiniz, 100'den fazla html etiketinden herhangi biri olabilir. Sonra 100+ kez $ (this) .is ('sometag') yazmanız gerekir. Sanırım bu yüzden bazı insanlar cevabınızı olumsuzladı.
ximi

Vay be ... is('*')yıllardır hiç görülmemiş . Muhtemelen OP'ye cevap vermeyecek ama benim için çalıştı, teşekkürler, @middus!
Alastair

53

Bu soruyu daha önce bir kez vurduğumdan ve benim durumumda bana yardımcı olmadığından ( thisbir jQuery seçici örneğim yoktu, bunun yerine bir jQuery seçici örneğim vardı). Çağırmak get(), size nodeNameyukarıda bahsedildiği gibi elde edebileceğiniz HTML öğesini verecektir .

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

veya

$('.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
sayfadaki ilk yararlı sayfa
Rooster

47

$(this).prop('tagName');JQuery 1.6 veya üstünü kullanıyorsanız da kullanabilirsiniz .


Bu tam olarak ihtiyacım olan şey. Tasarımımda jquery öğesini elimde tuttum, ancak orijinal HTML DOM öğesini yoktu. Bu benim için çalışıyor.
Gilthans

Sanırım bu sorunun konusunu yanıtlayan kesin cevap bu.
CodeTweetie


1

nodeNameNodeName bir DOM özelliği olduğundan ve jQuery'nin kendisinin bir nodeNameişlevi veya özelliği olmadığı için jQuery'de kullanamayacağınızı düşünüyorum . Ancak bu nodeNamekonulardan ilk bahseden yanıtlayana göre sorunu şu şekilde çözebildim:

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

NOT: thisburada bir jQuery nesnesi var.


0

Bu, google'da jquery tagname first child'ı sorgu olarak kullanarak gelen bir soru olduğundan, başka bir örnek göndereceğim :

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

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

Jquery sonucu bir (büyük harfli) etiket adıdır: P


0

Html eleman etiketi adını tüm sayfada alabilirsiniz.

Kullanabilirsin:

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

not: bunu seçicinizle değiştirin (h1, h3 veya ...)


0

Sadece başka bir sayı için yazdım ve ikinize de yardımcı olabileceğini düşündüm.

Kullanımı:

  • yani onclick="_DOM_Trackr(this);"

Parametreler:

  1. İzlenecek DOM nesnesi
  2. dönüş / uyarı anahtarı (isteğe bağlı, varsayılan = uyarı)

Kaynak kodu:

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

Örnek Çıktı:html > body > div#coreApp > div#productpage > div#productpage-wrapper > div > div > div > div > div#pthumb12 > form#thumb_uploader_src > input
Chris S.

Başka bir kullanım örneği: $('*').each(function(_i,_e){$(_e).attr('title',_DOM_Trackr(_e,true));});
Chris S.

0

Sorununuzu çözmenin en iyi yolu, $(this).attr("tag")ya this.nodeName.toLowerCase()da ile değiştirmektir this.tagName.toLowerCase().

Her ikisi de aynı sonucu verir!


0

Hızlı FİLTRE yöntemini düşünün :

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

İadeler:

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

yani:

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

0

Bunun yerine şunları yapın:

$(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()); 
  });
});
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.