วิธีการเลือกโหนด html ตาม ID ด้วย jquery เมื่อ id มีจุด?

178

หาก html ของฉันดูเหมือนว่านี้:

<td class="controlCell">
    <input class="inputText" id="SearchBag.CompanyName" name="SearchBag.CompanyName" type="text" value="" />
</td>

ฉันจะเลือก # SearchBag.CompanyName กับ JQuery ได้อย่างไร ฉันไม่สามารถทำงานได้และฉันกลัวว่ามันคือจุดที่ทำลายทุกอย่าง สิ่งที่น่ารำคาญคือการเปลี่ยนชื่อ id ทั้งหมดของฉันจะเป็นงานจำนวนมากไม่ต้องพูดถึงการสูญเสียในการอ่าน

หมายเหตุ:
โปรดอย่าเริ่มพูดคุยเกี่ยวกับวิธีการสร้างตารางสำหรับการจัดหน้า ฉันตระหนักถึงคุณค่าและข้อบกพร่องของ CSSและพยายามใช้ให้มากที่สุด

jquery

— Boris Callens
แหล่งที่มา

1

เป็นช่วงเวลาในรหัสแม้ HTML ที่ถูกต้อง?

— cletus

7

ใช่. รหัสอาจประกอบด้วย '-', '_', '.' และ ':' w3.org/TR/html4/types.html#type-name

— bobince

Jeps หน้าของฉันตรวจสอบทั้งหมดยกเว้น <title> แท็กคู่กรอบ asp.net MVC สร้าง ..

— บอริส Callens

2

ความเป็นไปได้ที่ซ้ำกันของฉันจะทำให้ jQuery เลือกองค์ประกอบด้วย a ได้อย่างไร (จุด) ใน ID ของพวกเขา?

— 2rs2ts

215

@Tomalak ในความคิดเห็น:

เนื่องจากตัวเลือกรหัสจะต้องนำหน้าด้วยแฮช # จึงไม่มีความคลุมเครือที่นี่

“ # id.class” เป็นตัวเลือกที่ถูกต้องที่ต้องใช้ทั้ง id และ class แยกต่างหากเพื่อให้ตรงกัน มันถูกต้องและไม่ซ้ำซ้อนโดยสิ้นเชิง

วิธีที่ถูกต้องในการเลือกตัวอักษร '.' ใน CSS คือการหลบหนี:“ #id \ .moreid” สิ่งนี้เคยทำให้เกิดปัญหาในเบราว์เซอร์รุ่นเก่าบางรุ่น (โดยเฉพาะ IE5.x) แต่เบราว์เซอร์เดสก์ท็อปสมัยใหม่ทั้งหมดรองรับ

ดูเหมือนว่าวิธีการเดียวกันจะทำงานใน jQuery 1.3.2 แต่ฉันยังไม่ได้ทดสอบอย่างละเอียด quickExpr ไม่หยิบมันขึ้นมา แต่ตัวแยกวิเคราะห์ตัวเลือกที่เกี่ยวข้องยิ่งขึ้นดูเหมือนว่าจะทำให้ถูกต้อง:

$('#SearchBag\\.CompanyName');

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

1

"# id.class เป็นตัวเลือกที่ถูกต้องที่ต้องใช้ทั้ง id และ class ที่แยกต่างหากเพื่อให้ตรงกับ": ตามข้อมูลจำเพาะ HTML ID จะต้องไม่ซ้ำกันตลอดทั้งเอกสาร "# id.class" จะเหมาะกับอะไร ฉันหมายความว่าคุณไม่สามารถเจาะจงได้มากกว่า "#id" ใช่ไหม

— Tomalak

2

@Tom:“ # id.class” อาจดีสำหรับเอกสารหลายฉบับที่ใช้สไตล์ชีทเดียวกันหรือตั้งค่าสถานะด้วยการเขียนสคริปต์ฝั่งไคลเอ็นต์ ตัวอย่างเช่น“ # navhome.navselected”

— bobince

@bince: ใช่ cletus ขึ้นมาด้วยตัวอย่างเดียวกันและฉันเลิกมันถูกต้อง ยังคงรู้สึกแปลกสำหรับฉันและฉันไม่สามารถเห็นข้อได้เปรียบที่แท้จริงของความสามารถในการทำเช่นนั้น โดยเฉพาะอย่างยิ่งในแง่ของ HTML ช่วยให้จุดใน ID และความจริงที่ว่าคุณสามารถใช้ ".navselected" เพื่อให้บรรลุเหมือนกัน

— Tomalak

ตัวอย่างเช่นคุณอาจต้องการให้ #navhome ที่เลือกสว่างขึ้นในสีที่แตกต่างไปจาก #navabout ที่เลือก แต่จะต้องแบ่งปันคุณสมบัติ. navselected อื่น ๆ ฉันจะไม่บอกว่าสถานการณ์นี้เกิดขึ้นตลอดเวลา แต่ฉันต้องการมันเป็นครั้งคราว

— bobince

3

ฉันคิดว่าคำตอบของ @Talalak สวยงามกว่าเช่น:$('[id="profile.birthdate"]')

— dr.dimitru

118

ตัวแปรหนึ่งจะเป็นเช่นนี้:

$("input[id='SearchBag.CompanyName']")

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

1

จริง คุณบอกฉันได้ไหมว่าทำไมโซลูชันของคุณถึงใช้งานได้และ $ ("# SearchBag.CompanyName") ไม่ทำงาน

— Boris Callens

9

เนื่องจาก .CompanyName ถือเป็นตัวเลือกคลาส

— cletus

2

การดูซอร์สโค้ดอย่างรวดเร็วนั้นเป็นการตัดสินใจออกแบบหรือข้อผิดพลาดอย่างรอบคอบ regex ใช้เพื่อระบุตัวเลือก id (ชื่อ quickExpr) ไม่รวมจุดเป็นอักขระที่ถูกต้อง อย่างไรก็ตามสเป็ค HTML อนุญาต

— Tomalak

5

การมีตัวเลือกคลาสบน ID อาจมีประโยชน์ ลองนึกภาพคุณมีองค์ประกอบ #menu ในทุกหน้า แต่ต้องการทำให้แตกต่างในหน้าใดหน้าหนึ่งของคุณ ตัวอย่างเช่น # menu.hideme? ขอบฉันรู้ แต่มันถูกต้อง

— cletus

2

ชัดเจนว่านี่คือคำตอบที่เหนือกว่า ทำงานร่วมกับตัวแปรเช่นนี้: $ ("tr [id = '" + private_var + "']"). css ("background-color", "#EEEEEE");

— Steve K

33

คุณไม่จำเป็นต้องหลบหนีอะไรเลยถ้าคุณใช้document.getElementById:

$(document.getElementById('strange.id[]'))

getElementById ถือว่าอินพุตเป็นเพียงแอ็ตทริบิวต์ id ดังนั้นจุดจะไม่ถูกตีความว่าเป็นตัวเลือกคลาส

— เครื่องปั่น
แหล่งที่มา

วิธีการแก้ปัญหาที่เรียบร้อยยังใช้งานได้ดีกับรหัสไดนามิกที่อาจมีจุด

— Cookalino

17

คำตอบสั้น ๆ : หากคุณมีองค์ประกอบที่มี id = "foo.bar"คุณสามารถใช้ตัวเลือก$("#foo\\.bar")

อีกต่อไปคำตอบ : นี่เป็นส่วนหนึ่งของเอกสาร jquery - ตัวเลือกส่วนที่คุณสามารถหาได้ที่นี่: http://api.jquery.com/category/selectors/

คำถามของคุณตอบถูกตอนต้นของเอกสาร:

หากคุณต้องการใช้เมตาอักขระใด ๆ (เช่น 
! "# $% & '() * +,. /:;? @ [\] ^` {|} ~) 
ในฐานะที่เป็นส่วนหนึ่งของชื่อคุณต้องหลีกเลี่ยงตัวละครด้วย 
แบ็กสแลชสองอัน: \\ ตัวอย่างเช่นหากคุณมีองค์ประกอบที่มี id = "foo.bar"
คุณสามารถใช้ตัวเลือก $ ("# foo \\. bar") ข้อกำหนด W3C CSS ประกอบด้วย
ชุดของกฎที่สมบูรณ์เกี่ยวกับตัวเลือก CSS ที่ถูกต้อง ยังมีประโยชน์คือ
รายการบล็อกโดย Mathias Bynens บนลำดับการยกเว้นอักขระ CSS สำหรับตัวระบุ

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

4

คุณรู้หรือไม่ว่าคำถามนี้มีอายุมากกว่าสามปีและเอกสารอาจไม่เหมือนกันใช่มั้ย

— Reimius

9

การเลือก attr น่าจะเหมาะสมเมื่อ ID ของคุณอยู่ในตัวแปร:

var id_you_want='foo.bar';
$('[id="' + id_you_want + '"]');

— โคน
แหล่งที่มา

4

นี่เป็นเอกสารในAPI ตัวเลือก jQuery :

การใช้ใด ๆ ของตัวละครเมตา (เช่น !"#$%&'()*+,./:;<=>?@[\]^`{|}~) \\เป็นส่วนหนึ่งของความหมายของชื่อก็ต้องหนีไปกับสองทับขวา: ยกตัวอย่างเช่นเป็นองค์ประกอบที่มีความ สามารถใช้ตัวเลือกid="foo.bar"$("#foo\\.bar")

ในระยะสั้นคำนำหน้าด้วย.\\

$('#SearchBag\\.CompanyName')

ปัญหาคือว่า.จะตรงกับชั้นเรียนเพื่อจะตรงกับ$('#SearchBag.CompanyName') <div id="SearchBag" class="CompanyName">การหลบหนีด้วย\\.จะได้รับการปฏิบัติตามปกติ.โดยไม่มีความสำคัญพิเศษตรงกับ ID ที่คุณต้องการ

สิ่งนี้ใช้กับตัวละครทั้งหมด!"#$%&'()*+,./:;<=>?@[\]^`{|}~ที่มีนัยสำคัญเป็นพิเศษในตัวเลือกใน jQuery

— Jon Surrell
แหล่งที่มา

2

พวกที่กำลังมองหาโซลูชันที่กว้างกว่านี้ฉันพบโซลูชันหนึ่งที่แทรกเครื่องหมายแบ็คสแลชหนึ่งรายการก่อนอักขระพิเศษใด ๆ ซึ่งจะช่วยแก้ไขปัญหาที่เกี่ยวข้องกับการเรียกชื่อ & ID จาก div ซึ่งมีอักขระพิเศษ

"Str1.str2% str3" .replace (/ [^ \ w \ s] / gi, '\\ $ &')

ส่งคืน "Str1 \\. str2 \\% str3"

หวังว่านี่จะเป็นประโยชน์!

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

1

คุณสามารถใช้ตัวเลือกแอททริบิวต์:

$("[id='SearchBag.CompanyName']");

หรือคุณสามารถระบุประเภทองค์ประกอบ:

$("input[id='SearchBag.CompanyName']");

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