Bisakah jQuery memberikan nama tag?

115

Saya punya beberapa elemen pada halaman HTML yang memiliki kelas yang sama - tetapi mereka memiliki tipe elemen yang berbeda. Saya ingin mengetahui nama tag elemen saat saya mengulanginya - tetapi .attr tidak mengambil "tag" atau "tagname".

Inilah yang saya maksud. Pertimbangkan elemen-elemen ini di halaman:

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

Sekarang saya ingin menjalankan sesuatu seperti ini untuk memastikan bahwa semua elemen saya memiliki id jika belum ditentukan:

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

Hasil yang saya inginkan adalah bahwa elemen H2 dan H4 kemudian akan memiliki id

rndh2_1
rndh4_3

masing-masing.

Adakah ide tentang bagaimana saya dapat menemukan nama tag dari elemen yang diwakili oleh "ini"?

BigPigVT
sumber
1
Mungkin jawabannya ada di sini: stackoverflow.com/a/8355251/271103
Hakan KOSE

Jawaban:

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

seharusnya

$(this).attr("id", "rnd" + this.nodeName.toLowerCase() + "_" + i.toString());
Wabbitseason
sumber
18
Anda harus menggunakan this.nodeName.toLowerCase (), karena kebanyakan representasi DOM dari dokumen HTML secara otomatis menggunakan huruf besar nodeName.
NickFitz
baik this.nodeName dan this.tagName tampaknya bekerja untuk saya. Terima kasih semuanya!
BigPigVT
5
1 untuk menyebutkan nodeName. Terkadang, jQuery satu langkah terlalu jauh :-)
Serge Wautier
2
+1 jQuery is () tidak melakukan tugasnya karena dalam kasus h1, h2, dll, ada 6 kasus berbeda yang harus Anda tangani jika menggunakan is ().
Konstantin Dinev
166

Anda bisa mencoba ini:

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

Lihat dokumen lebih lanjut tentang is ().

middus
sumber
12
Kepada pihak yang berkepentingan: jika Anda tidak menyukai jawaban saya, beri tahu saya alasannya sehingga saya dapat memperbaikinya dan belajar untuk jawaban SO di masa mendatang. Terima kasih.
middus
3
Aku juga membencinya. Pokoknya saya upvoted karena nodeNamemengembalikan string yang, tergantung browser, berada di atas atau tidak.
Marcel Falliere
2
Asumsikan hal berikut: Anda tidak hanya memiliki sedikit pilihan tag yang memungkinkan, tetapi bisa juga salah satu dari 100+ tag html. Maka Anda harus menulis: $ (this) .is ('sometag') 100+ kali. Saya berasumsi inilah mengapa beberapa orang tidak menyukai jawaban Anda.
ximi
Wow ... tidak pernah terlihat is('*')selama bertahun-tahun. Ini mungkin tidak akan menjawab OP tetapi berhasil untuk saya, terima kasih, @middus!
Alastair
53

Karena saya telah mencapai pertanyaan ini sekali sebelumnya dan itu tidak membantu saya dalam kasus saya (saya tidak memiliki this, tetapi memiliki contoh pemilih jQuery). Memanggil get()akan memberi Anda elemen HTML, yang dengannya Anda bisa mendapatkan nodeNameseperti yang disebutkan di atas.

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

atau

$('.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
sumber
1
pertama yang bermanfaat di halaman
Rooster
47

Anda juga bisa menggunakan $(this).prop('tagName');jika Anda menggunakan jQuery 1.6 atau lebih tinggi.

Bijay Rungta
sumber
Inilah yang saya butuhkan. Dalam desain saya, saya memiliki elemen jquery yang berguna, tetapi bukan elemen DOM HTML asli. Ini berhasil untuk saya.
Gilthans
Saya pikir ini adalah jawaban yang tepat yang menjawab subjek pertanyaan ini.
CodeTweetie
3

Iya. Anda bisa menggunakan kode di bawah ini:

this.tagName
fernando
sumber
1

Saya pikir Anda tidak dapat menggunakan nodeNamedi jQuery karena nodeName adalah properti DOM dan jQuery itu sendiri tidak memiliki nodeNamefungsi atau properti. Namun berdasarkan responden yang pertama kali menyinggung nodeNamehal tersebut, berikut cara saya menyelesaikan masalah tersebut:

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

CATATAN: di thissini adalah objek jQuery.

Bersekongkol
sumber
0

Karena ini adalah pertanyaan yang Anda tanyakan di google menggunakan jquery tagname first child sebagai kueri, saya akan memposting contoh lain:

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

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

Hasil jquery adalah tagname (huruf besar): P

Hein
sumber
0

Anda bisa mendapatkan nama tag elemen html di seluruh halaman.

Anda bisa menggunakan:

        $('body').contents().on("click",function () {
          var string = this.tagName;
          alert(string);
         });
pengguna2029521
sumber
0
you can try:
jQuery(this).get(0).tagName;
or
jQuery(this).get(0).nodeName;

catatan: ganti ini dengan selektor Anda (h1, h3 atau ...)

akbar amani
sumber
0

Saya baru saja menulisnya untuk masalah lain dan berpikir ini dapat membantu Anda berdua juga.

Pemakaian:

  • yaitu onclick="_DOM_Trackr(this);"

Parameter:

  1. DOM-Objek untuk dilacak
  2. tombol kembali / peringatan (opsional, default = peringatan)

Kode sumber:

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.
sumber
Contoh Keluaran:html > body > div#coreApp > div#productpage > div#productpage-wrapper > div > div > div > div > div#pthumb12 > form#thumb_uploader_src > input
Chris S.
Contoh penggunaan lain: $('*').each(function(_i,_e){$(_e).attr('title',_DOM_Trackr(_e,true));});
Chris S.
0

Cara terbaik untuk memperbaiki masalah Anda, adalah menggantinya $(this).attr("tag")dengan this.nodeName.toLowerCase()atau this.tagName.toLowerCase().

Keduanya menghasilkan hasil yang sama persis!

John Slegers
sumber
0

Pertimbangkan metode FILTER cepat :

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

kembali:

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

begitu:

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

Cukup lakukan:

$(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
sumber