jQuery: Dapatkan nama tag elemen yang dipilih

641

Apakah ada cara mudah untuk mendapatkan nama tag?

Misalnya, jika saya diberikan $('a')fungsi, saya ingin mendapatkannya 'a'.

javascript jquery jquery-selectors

— konfigurator
sumber

2

kemungkinan rangkap dari Apakah jQuery memiliki fungsi untuk menentukan tipe tag dari elemen DOM yang dirujuk oleh objek jQuery?

— Darko Z

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

62

Pada jQuery 1.6 Anda sekarang harus memanggil prop:

$target.prop("tagName")

Lihat http://api.jquery.com/prop/

— rampok
sumber

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