jQuery: เลือกคลาสและรหัสองค์ประกอบในเวลาเดียวกัน?


170

ฉันมีบางลิงค์ที่ฉันต้องการเลือกคลาสและรหัสในเวลาเดียวกัน

นั่นเป็นเพราะฉันมีพฤติกรรมที่แตกต่าง 2 อย่าง เมื่อคลาสของลิงก์มีชื่อคลาสหนึ่งชื่อพวกมันจะทำงานในทิศทางเดียวเมื่อลิงก์ประเภทเดียวกันมีชื่อคลาสอื่นพวกมันก็จะทำงานต่างกัน ชื่อคลาสเป็น switch with jquery

ดังนั้นฉันต้องสามารถเลือกลิงค์คลาสและรหัสได้ในเวลาเดียวกัน เป็นไปได้ไหม

ฉันพยายามแล้ว:

 $("a .save #country")

ไม่มีผลลัพธ์ใด ๆ

คำตอบ:


305

คุณทำได้:

$("#country.save")...

หรือ

$("a#country.save")...

หรือ

$("a.save#country")...

ตามที่คุณชอบ.

ใช่คุณสามารถระบุตัวเลือกที่จะต้องตรงกับ ID และคลาส (และอาจมีชื่อแท็กและสิ่งอื่นที่คุณต้องการจะใส่)


41
ดังนั้นโดยทั่วไปมันชอบ: $ ("# a .b") หมายถึงองค์ประกอบที่มีคลาส b ภายในองค์ประกอบที่มี id a $ ("# ab") หมายถึงองค์ประกอบที่มีคลาส b และ id a เคล็ดลับคือช่องว่างระหว่าง #a กับ. b
Bhumi Singhal

13
ต้องระวังว่าคุณใช้ id selector ก่อนเรียนไม่เช่นนั้นจะไม่ทำงาน ตัวอย่าง: $ (". save # country") ... ไม่ส่งคืนผลลัพธ์
slotomo

43

เพียงแค่เพิ่มว่าคำตอบที่ Alex ให้ไว้นั้นเหมาะกับฉันไม่ใช่คำตอบที่ถูกเน้นเป็นคำตอบ

อันนี้ใช้ไม่ได้สำหรับฉัน

$('#country.save') 

แต่อันนี้ทำ:

$('#country .save') 

ดังนั้นข้อสรุปของฉันคือการใช้พื้นที่ ตอนนี้ฉันไม่ทราบว่าเป็น jQuery เวอร์ชันใหม่ที่ฉันใช้ (1.5.1) แต่หวังว่านี่จะช่วยทุกคนที่มีปัญหาแบบเดียวกันกับที่ฉันเคยมี

แก้ไข:เครดิตเต็มรูปแบบสำหรับคำอธิบาย (ในความคิดเห็นต่อคำตอบของ Alex) ไปที่ Felix Kling ผู้ที่กล่าวว่า:

ช่องว่างคือตัวเลือกการเรียงตามลำดับคือ AB หมายถึง "จับคู่องค์ประกอบทั้งหมดที่ตรงกับ B ซึ่งเป็นผู้สืบทอดขององค์ประกอบที่ตรงกับ A" AB หมายถึง "เลือกองค์ประกอบทั้งหมดที่ตรงกับ A และ B" ดังนั้นมันขึ้นอยู่กับสิ่งที่คุณต้องการบรรลุ #country.saveและ#country .saveไม่เทียบเท่า


2
ปัญหาที่คุณพูดว่า "ตอบโต้" แทนที่จะเป็น "ประเทศ" หรือไม่?
amindfv

8

มันจะทำงานเมื่อเพิ่มช่องว่างระหว่าง id และตัวระบุคลาส

$("#countery .save")...


1
อันที่จริงมันใช้งานได้สำหรับฉันเพราะมันไม่ทำงานเหมือน $ ('# countery.save') ดังนั้นขอบคุณ!
Nikola

1
บางครั้งฉันก็พบว่าพิถีพิถันเกี่ยวกับพื้นที่ เช่น $ (. selector> .item # id) ใช้งานได้ แต่ $ (. selector> .item #id) ไม่ทำงาน
Abe Petrillo

21
ช่องว่างคือตัวเลือกผู้สืบทอดซึ่งA Bหมายความว่า "จับคู่องค์ประกอบทั้งหมดที่ตรงกับ B ซึ่งเป็นผู้สืบทอดขององค์ประกอบที่ตรงกับ A" ABหมายถึง "เลือกองค์ประกอบทั้งหมดที่ตรงกับ A และ B" ดังนั้นมันขึ้นอยู่กับสิ่งที่คุณต้องการบรรลุ #countery.saveและ#countery .saveไม่เทียบเท่า
เฟลิกซ์คลิง

2

ในที่สุดกฎเดียวกันกับ css ใช้

ดังนั้นฉันคิดว่าข้อมูลอ้างอิงนี้อาจมีประโยชน์ในการใช้งานบ้าง


คุณสามารถสรุปเนื้อหาของการอ้างอิงของคุณได้หรือไม่?
krlmlr

ที่จริงแล้วตามที่api.jquery.com/category/selectors jQuery มีตัวเลือกบางตัวของมันเอง ยังมันไม่จริงบอกว่าทุก CSS 1-3 เตอร์ได้รับการสนับสนุน ...
SAMB

@ SamB คุณพูดถูก แต่มันบอกว่ามันยืมมาจาก CSS 1-3 และเพิ่มมันเอง ฉันยังคิดว่าลิงค์ไปยังสิ่งของ W3C ใช้ได้กับการสนทนานี้
akousmata


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.