jQuery: รับชื่อแท็กองค์ประกอบที่เลือก

641

มีวิธีง่ายๆในการรับชื่อแท็กหรือไม่

ตัวอย่างเช่นถ้าฉันได้รับในการทำงานผมต้องการที่จะได้รับ$('a')'a'

javascript jquery jquery-selectors

2

มีความเป็นไปได้ที่ซ้ำกันของjQuery มีฟังก์ชั่นใด ๆ เพื่อกำหนดประเภทแท็กขององค์ประกอบ DOM ที่อ้างอิงโดยวัตถุ jQuery หรือไม่

— Darko Z

1032

.prop("tagName")คุณสามารถโทรหา ตัวอย่าง:

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

หากการเขียนออกมา.prop("tagName")น่าเบื่อคุณสามารถสร้างฟังก์ชั่นที่กำหนดเองได้ดังนี้

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

ตัวอย่าง:

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

โปรดทราบว่าชื่อแท็กจะตามแบบแผนกลับทุน หากคุณต้องการให้ชื่อแท็กที่ส่งคืนเป็นตัวพิมพ์เล็กทั้งหมดคุณสามารถแก้ไขฟังก์ชันที่กำหนดเองได้ดังนี้:

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

ตัวอย่าง:

jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"

— tilleryj
แหล่งที่มา

18

ใน.propฐานะของ jQuery 1.6 สิ่งนี้ควรเป็น

— Rocket Hazmat

3

ข้อตกลงการใช้อักษรตัวพิมพ์ใหญ่ตามด้วยเบราว์เซอร์ทั้งหมดหรือไม่ ถ้าไม่ jQuery ทำให้เป็นมาตรฐานนี้หรือไม่?

— callum

8

tagName เป็นส่วนหนึ่งของข้อมูลจำเพาะ DOM และเป็นตัวพิมพ์ใหญ่เสมอ

— tilleryj

โปรดทราบว่าสตริงที่ส่งคืนอยู่ในตัวพิมพ์ใหญ่ นี่จะเป็น gotcha ถ้าคุณพยายามเปรียบเทียบมันกับ "div" หรือ "a"

— Hartley Brody

3

การใช้toLowerCase()หรือtoUpperCase()อาจมีประโยชน์เมื่อเปรียบเทียบprop('tagName')ผลลัพธ์กับชื่อแท็ก if($("my_selector").prop("tagName").toLowerCase() == 'div')หรือif($("my_selector").prop("tagName").toUpperCase() == 'DIV')

— S.Thiongane

99

คุณสามารถใช้nodeNameคุณสมบัติของ DOM :

$(...)[0].nodeName

— SLaks
แหล่งที่มา

ขอบคุณ ใช้งานได้ดี - แม้ว่าฉันจะใช้ jQueryish มากกว่านี้เพราะฉันอยู่ในโลก jQuery

— กำหนดค่า

6

โซลูชั่น JS บริสุทธิ์ (เช่นนี้) โดยทั่วไปจะเหนือกว่า jQuery โดยเฉพาะอย่างยิ่งหากพวกเขาไม่ประสบปัญหาความเข้ากันได้ของเบราว์เซอร์หรือมีความละเอียดมากขึ้น

— Steven Lu

25

... และโดยเฉพาะเนื่องจากปัญหาความเข้ากันไม่ได้ของเบราว์เซอร์ jQuery มักจะเหนือกว่าถ้าใครบางคนเลือกโซลูชันและไม่รอบรู้ในสิ่งที่เข้ากันไม่ได้กับเบราว์เซอร์ที่ต้องระวัง ;)

— Scott Stafford

4

ฉันพิจารณาสิ่งที่เหนือกว่านี้เพราะไม่สำคัญว่ารุ่น jQuery คืออะไรโซลูชันนี้ใช้ได้กับทุกรุ่น +1

— Stijn de Witt

7

โดยเฉพาะอย่างยิ่งถ้าคุณอยู่ในแต่ละ () - เช่นสถานการณ์ที่คุณต้องโยนกลับไปที่องค์ประกอบวัตถุ jQuery $(this).prop('tagname')ที่จะได้รับทรัพย์สินที่มีอยู่แล้วเช่น this.nodeName มักจะมีประสิทธิภาพมากขึ้น +1

— commonpike

62

ในฐานะของ jQuery 1.6 คุณควรโทรหา prop:

$target.prop("tagName")

ดูhttp://api.jquery.com/prop/

— ปล้น
แหล่งที่มา

46

jQuery 1.6+

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

รุ่นเก่ากว่า

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

toLowerCase () ไม่บังคับ

— Dayron Gallardo
แหล่งที่มา

ทำไมคุณกำลังทำอะไรnew String?

— Rocket Hazmat

เพราะ toLowerCase () เป็นวิธีการของ String

— Dayron Gallardo

23

นี่เป็นอีกวิธีหนึ่ง:

$('selector')[0].tagName

— Chepech
แหล่งที่มา

ทำได้ดีนี่! ชัดเจนกว่า nodeName และสั้นกว่า : P

— Dennis98

11

คุณไม่ควรใช้jQuery('selector').attr("tagName").toLowerCase()เพราะใช้งานได้กับ Jquery รุ่นเก่าเท่านั้น

คุณสามารถใช้$('selector').prop("tagName").toLowerCase()หากคุณมั่นใจว่าคุณกำลังใช้ jQuery รุ่นนั้น> = เวอร์ชัน 1.6

บันทึก :

คุณอาจคิดว่าทุกคนใช้ jQuery 1.10+ หรืออะไรบางอย่างอยู่ในขณะนี้ (มกราคม 2016) แต่น่าเสียดายที่ไม่ใช่ในกรณีนี้ ตัวอย่างเช่นคนจำนวนมากในปัจจุบันยังคงใช้ Drupal 7 และทุกรุ่นอย่างเป็นทางการของ Drupal 7 จนถึงทุกวันนี้รวม jQuery 1.4.4 เป็นค่าเริ่มต้น

ดังนั้นหากไม่ทราบแน่ชัดว่าโครงการของคุณจะใช้ jQuery 1.6+ หรือไม่ให้ลองใช้หนึ่งในตัวเลือกที่ใช้ได้กับ jQuery ทุกเวอร์ชัน:

ตัวเลือกที่ 1 :

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

ตัวเลือก 2

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

— John Slegers
แหล่งที่มา

0

nodeName จะให้ชื่อแท็กเป็นตัวพิมพ์ใหญ่ในขณะที่ localName จะให้ตัวพิมพ์เล็ก

$("yourelement")[0].localName

จะให้: yourelement แทน YOURELEMENT

— โดโนแวนพี
แหล่งที่มา