jQuery: Dapatkan nama tag elemen yang dipilih

Jawaban:

1032

Anda bisa menelepon .prop("tagName"). Contoh:

jQuery("<a>").prop("tagName"); //==> "A"
jQuery("<h1>").prop("tagName"); //==> "H1"
jQuery("<coolTagName999>").prop("tagName"); //==> "COOLTAGNAME999"


Jika menulis .prop("tagName")itu membosankan, Anda dapat membuat fungsi khusus seperti:

jQuery.fn.tagName = function() {
  return this.prop("tagName");
};

Contoh:

jQuery("<a>").tagName(); //==> "A"
jQuery("<h1>").tagName(); //==> "H1"
jQuery("<coolTagName999>").tagName(); //==> "COOLTAGNAME999"


Perhatikan bahwa nama tag, secara konvensional, dikembalikan dengan huruf besar . Jika Anda ingin nama tag yang dikembalikan semuanya huruf kecil, Anda dapat mengedit fungsi khusus seperti:

jQuery.fn.tagNameLowerCase = function() {
  return this.prop("tagName").toLowerCase();
};

Contoh:

jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"
tilleryj
sumber
18
SEBAGAI jQuery 1.6, ini seharusnya .prop.
Rocket Hazmat
3
Apakah konvensi kapitalisasi diikuti oleh semua browser? Jika tidak, apakah jQuery menormalkan ini?
callum
8
tagName adalah bagian dari spesifikasi DOM dan selalu menggunakan huruf kapital.
tilleryj
Perhatikan bahwa string yang dikembalikan adalah dalam HURUF BESAR. Ini akan menjadi gotcha jika Anda mencoba membandingkannya dengan "div" atau "a" misalnya.
Hartley Brody
3
menggunakan toLowerCase()atau toUpperCase()mungkin membantu saat membandingkan prop('tagName')hasil dengan nama tag. if($("my_selector").prop("tagName").toLowerCase() == 'div')atauif($("my_selector").prop("tagName").toUpperCase() == 'DIV')
S.Thiongane
99

Anda dapat menggunakan nodeNameproperti DOM :

$(...)[0].nodeName
Slaks
sumber
Terima kasih. Berfungsi bagus - walaupun saya akan menggunakan versi jQueryish lebih banyak karena saya berada di dunia jQuery saat ini.
konfigurator
6
solusi JS murni (seperti ini) umumnya lebih unggul daripada yang jQuery terutama jika mereka tidak menderita masalah kompatibilitas browser atau jauh lebih bertele-tele.
Steven Lu
25
... dan khususnya karena masalah ketidakcocokan browser tersebut, masalah jQuery sering kali lebih unggul jika seseorang memilih solusi dan tidak berpengalaman dalam hal ketidaksesuaian browser yang harus diperhatikan. ;)
Scott Stafford
4
Saya menganggap superior ini karena tidak peduli apa versi jQuery, solusi ini berfungsi pada semua versi. +1
Stijn de Witt
7
khususnya jika Anda berada dalam situasi like () - like, di mana Anda harus melemparkan elemen kembali ke objek jquery untuk mendapatkan properti yang sudah ada di sana, seperti $(this).prop('tagname'). this.nodeName seringkali lebih efisien. +1
commonpike
46

jQuery 1.6+ 

jQuery('selector').prop("tagName").toLowerCase()

Versi yang lebih lama 

jQuery('selector').attr("tagName").toLowerCase()

toLowerCase () tidak wajib.

Dayron Gallardo
sumber
Mengapa kau lakukan new String?
Rocket Hazmat
Karena toLowerCase () adalah metode String
Dayron Gallardo
23

Ini adalah cara lain:

$('selector')[0].tagName
Chepech
sumber
Yang bagus! Lebih jelas dari nodeName dan bahkan lebih pendek. : P
Dennis98
11

Anda TIDAK boleh menggunakan jQuery('selector').attr("tagName").toLowerCase(), karena itu hanya bekerja di versi Jquery yang lebih lama.

Anda dapat menggunakan $('selector').prop("tagName").toLowerCase()jika Anda yakin bahwa Anda menggunakan versi jQuery itu> = versi 1.6.

Catatan :

Anda mungkin berpikir bahwa SEMUA ORANG menggunakan jQuery 1.10+ atau sesuatu sekarang (Januari 2016), tetapi sayangnya itu tidak benar-benar terjadi. Misalnya, banyak orang saat ini masih menggunakan Drupal 7, dan setiap rilis resmi Drupal 7 hingga hari ini termasuk jQuery 1.4.4 secara default.

Jadi, jika tidak tahu pasti apakah proyek Anda akan menggunakan jQuery 1.6+, pertimbangkan untuk menggunakan salah satu opsi yang berfungsi untuk SEMUA versi jQuery:

Pilihan 1 :

jQuery('selector')[0].tagName.toLowerCase()

pilihan 2 

jQuery('selector')[0].nodeName.toLowerCase()
John Slegers
sumber
0

nodeName akan memberi Anda nama tag dalam huruf besar, sedangkan localName akan memberi Anda huruf kecil.

$("yourelement")[0].localName

akan memberi Anda: elemen Anda alih-alih YOURELEMENT

Donovan P
sumber