ฉันจะเลือกรายการที่มีคลาสภายใน DIV ได้อย่างไร

142

ฉันมี HTML ต่อไปนี้:

<div id="mydiv">
  <div class="myclass"></div>
</div>

ฉันต้องการที่จะสามารถใช้ตัวเลือกที่เลือกภายในdivแต่เฉพาะสำหรับmydivภาชนะ ฉันจะทำให้สำเร็จด้วย jQuery ได้อย่างไร

— Idan Shechter
แหล่งที่มา

285

ลอง:

$('#mydiv').find('.myclass');

การสาธิต JS Fiddleสาธิต

หรือ:

$('.myclass','#mydiv');

การสาธิต JS Fiddleสาธิต

หรือ:

$('#mydiv .myclass');

การสาธิต JS Fiddleสาธิต

อ้างอิง:

find().
บริบทเลือก

ดีที่จะเรียนรู้จากfind()เอกสาร:

กระบวนการ. find () และ. children () มีความคล้ายคลึงกันยกเว้นว่าวิธีหลังจะส่งระดับเดียวลงในแผนผัง DOM

— เดวิดพูดว่าคืนสถานะโมนิก้า
แหล่งที่มา

2

สองอันที่สองจะไม่ทำงาน แต่ find is ok สองสองจะเลือกทุกคลาส = myclass และเลือกทุก id = mydiv) ฉันคิดว่า

— czupe

2

@czupe: ไม่ในขณะที่วิธีการเลือกบริบทถูกเขียนแตกต่างกัน jQuery นำมาใช้ภายในเป็น$('#mydiv').find('.myclass');แนวทางเดียวกับที่ใช้ในข้อมูลโค้ดแรก อนึ่ง: '... เลือกทุกรายการid=mydiv' หรือไม่ มีเพียงควรที่เคยเป็นหนึ่งในการใช้ที่กำหนดidในหน้าเว็บ (เป็นid จะต้องไม่ซ้ำกันภายในเอกสาร )

— เดวิดบอกว่าคืนสถานะโมนิก้า

@DavidThomas ฉันเพิ่งลอง $ ('# mydiv .myclass'); และนั่นก็คือการเลือก div ทั้งหมดที่มีคลาส myclass แทนที่จะเป็น divs ภายใน mydiv

— user3281466

@ user3281466: จริงเหรอ? ดูเหมือนไม่น่าเป็นไปได้ที่คุณจะสร้างปัญหาขึ้นมาใหม่ได้หรือไม่?

— เดวิดบอกว่าคืนสถานะโมนิก้า

วิธีการที่คุณตรวจสอบอะไรที่ div แล้วใส่ไว้ใน: ไม่ ()

— SuperUberDuper

20

ลองสิ่งนี้

$("#mydiv div.myclass")

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

หรือถ้าคุณไม่สนใจว่ามันจะเป็นdiv(หรือเป็นเสมอdiv) คุณสามารถลดความซับซ้อนเป็น $ ("# mydiv .myclass")

— Michael Mior

@Michael - ใช่เราสามารถพูดได้เพียง. micals แต่ถ้าเรารู้ว่ามันเป็น div, div.myclass จะทำการค้นหาได้เร็วขึ้น

— ShankarSangoli

@Shankar ส่วนใหญ่อาจจะไม่ทำให้เร็วขึ้น แต่ช้าลง สมมติว่า jquery ใช้เสียงดังฉ่าและไม่ใช่คนพื้นเมืองdocument.queryselectorallมันอาจจะค้นหาในแบบเดียวกันและในกรณีของคุณทำการตรวจสอบพิเศษ เป็นไปได้ว่าการใช้งานดั้งเดิมทำเช่นเดียวกัน

— davin

การทดสอบอย่างรวดเร็วบางอย่างที่ฉันวิ่งแนะนำว่านี่ขึ้นอยู่กับเบราว์เซอร์ มันปรากฏขึ้นเร็วขึ้นเล็กน้อยใน Chrome และช้าลงเล็กน้อยใน FF ไม่ว่าจะด้วยวิธีใดเว้นแต่คุณจะเรียกใช้ตัวเลือกนี้หลายครั้งหรือมากกว่าองค์ประกอบจำนวนมากความแตกต่างอาจไม่มีความสำคัญ ดูที่นี่สำหรับการทดสอบน้ำมันดิบของฉัน (และอาจมีข้อบกพร่อง)

— Michael Mior

@Michael - ถ้าเราระบุ tagname พร้อมกับชื่อคลาสมันจะใช้ getElementsByTagName ก่อนแล้วจึงค้นหาชื่อคลาสที่ iw เร็วขึ้นอย่างแน่นอนและยังคงใช้เมธอดดั้งเดิมเพื่อทำการเรียงลำดับระดับแรก หาคำตอบไม่ได้ถ้าไม่มีองค์ประกอบให้เลือกมากมาย

— ShankarSangoli

11

คุณจะทำแบบเดียวกับที่คุณใช้ตัวเลือก css สำหรับอินสแตนซ์คุณสามารถทำได้

$("#mydiv > .myclass")

หรือ

$("#mydiv .myclass")

อันสุดท้ายจะจับคู่กับ myclass ทุกตัวใน myDiv รวมถึง myclass ภายใน myclass

— Leandro Galluppi
แหล่งที่มา

6

หากคุณต้องการเลือกองค์ประกอบทุกอย่างที่มีการใช้แอตทริบิวต์ class "myclass"

$('#mydiv .myclass');

หากคุณต้องการเลือกเฉพาะองค์ประกอบ div ที่มีการใช้แอตทริบิวต์ class "myclass"

$("div#mydiv div.myclass");

ค้นหาเพิ่มเติมเกี่ยวกับตัวเลือก jquery ดูบทความเหล่านี้

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

1

ลองนี้แทน $(".video-divs.focused")ลองนี้แทนใช้งานได้หากคุณกำลังมองหา div-video ที่เน้น

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