jQuery สามารถระบุชื่อแท็กได้หรือไม่?


115

ฉันมีองค์ประกอบหลายอย่างในหน้า HTML ซึ่งมีคลาสเดียวกัน แต่เป็นองค์ประกอบที่แตกต่างกัน ฉันต้องการค้นหาชื่อแท็กขององค์ประกอบเมื่อฉันวนซ้ำ - แต่ .attr ไม่ใช้ "tag" หรือ "tagname"

นี่คือสิ่งที่ฉันหมายถึง พิจารณาองค์ประกอบเหล่านี้ในหน้า:

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

ตอนนี้ฉันต้องการเรียกใช้สิ่งนี้เพื่อให้แน่ใจว่าองค์ประกอบของฉันทั้งหมดมี id หากยังไม่ได้กำหนดไว้:

$(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 จะมี id ของ

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

ทั้ง this.nodeName และ this.tagName ดูเหมือนจะใช้ได้กับฉัน ขอบคุณทุกคน!
BigPigVT

5
+1 สำหรับการกล่าวถึง nodeName บางครั้ง jQuery ก็ไกลเกินไป :-)
Serge Wautier

2
+1 jQuery คือ () ไม่ทำงานเนื่องจากในกรณีของ h1, h2 และอื่น ๆ มี 6 กรณีที่แตกต่างกันที่คุณต้องจัดการหากใช้ is ()
Konstantin Dinev

166

คุณสามารถลองสิ่งนี้:

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

ดูเอกสารเพิ่มเติมได้ที่ is ()


12
ผู้ที่อาจกังวล: หากคุณไม่ลงคะแนนคำตอบของฉันโปรดบอกเหตุผลว่าทำไมฉันจึงสามารถปรับปรุงและเรียนรู้คำตอบ SO ในอนาคต ขอบคุณ
middus

3
ฉันเกลียดมันเกินไป อย่างไรก็ตามฉันได้รับการโหวตเนื่องจากnodeNameส่งคืนสตริงที่ขึ้นอยู่กับเบราว์เซอร์ว่าอยู่บนหรือไม่
Marcel Falliere

2
สมมติว่าคุณไม่ได้มีแท็กที่เป็นไปได้เพียงเล็กน้อย แต่อาจเป็นแท็ก html มากกว่า 100 แท็กก็ได้ จากนั้นคุณจะต้องเขียน: $ (this) .is ('something') a 100+ ครั้ง ฉันคิดว่านี่คือสาเหตุที่บางคนลดคะแนนคำตอบของคุณ
ximi

ว้าว ... ไม่เคยเห็น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
อันแรกที่เป็นประโยชน์บนหน้า
Rooster

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 ลูกคนแรกเป็นคำถามฉันจะโพสต์ตัวอย่างอื่น:

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

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

ผลลัพธ์ jquery คือ tagname (ตัวพิมพ์ใหญ่): 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-Object เพื่อติดตาม
  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));});
Chris S.

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()); 
  });
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.