jquery ตัวเลือกสำหรับคลาสภายใน id

ด้านล่างนี้ฉันจะเลือกองค์ประกอบที่มีคลาสmy_classภายในองค์ประกอบด้วยได้id = "my_id"อย่างไร

โปรดทราบว่าองค์ประกอบอาจมีคลาสอื่นซึ่งฉันไม่ได้เลือก

<div id = "my_id">
    <span class = "my_class hidden">hi</span>
    <span class = "my_class">hello</span>
</div>

พยายาม

$("#my_id [class*=my_class ]")

คุณสามารถใช้ตัวเลือกชั้นเรียนร่วมกับตัวเลือกลูกหลาน

$("#my_id .my_class")

เพียงใช้ตัวเลือกคลาส ol 'ธรรมดา

$('#my_id .my_class')

ไม่สำคัญว่าองค์ประกอบนั้นจะมีคลาสอื่นด้วยหรือไม่ มีคลาส. my_classและอยู่ใน#my_idดังนั้นจึงตรงกับตัวเลือกนั้น

เกี่ยวกับประสิทธิภาพ

ตามเอกสารเกี่ยวกับประสิทธิภาพของตัวเลือก jQueryการใช้ตัวเลือกสองตัวแยกกันเร็วกว่าเช่นนี้:

$('#my_id').find('.my_class')

นี่คือส่วนที่เกี่ยวข้องของเอกสาร:

ID-Based Selectors

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

.find()วิธีการได้เร็วขึ้นเพราะตัวเลือกแรกที่จะถูกจัดการโดยไม่ต้องผ่านเครื่องมือเลือก Sizzle - เลือก ID-เพียงได้รับการจัดการโดยใช้document.getElementById()ซึ่งเป็นไปอย่างรวดเร็วมากเพราะมันเป็นสันดานไปเบราว์เซอร์

การเลือกตาม IDหรือตามคลาสเพียงอย่างเดียว (เหนือสิ่งอื่นใด) เรียกใช้ฟังก์ชันที่เบราว์เซอร์จัดหามาdocument.getElementById()ซึ่งค่อนข้างรวดเร็วในขณะที่การใช้ตัวเลือกที่สืบทอดจะเรียกใช้เอ็นจิ้น Sizzle ดังที่กล่าวไว้ซึ่งแม้ว่าจะเร็ว แต่จะช้ากว่าทางเลือกที่แนะนำ

ใช้เสมอ

//Super Fast
$('#my_id').find('.my_class'); 

แทน

// Fast:
$('#my_id .my_class');

มีลักษณะที่JQuery กฎการปฏิบัติงาน

นอกจากนี้ที่Jquery Doc

ฉันคิดว่าการขอให้คุณเลือกเฉพาะ<span class = "my_class">hello</span>องค์ประกอบนี้คุณได้ทำเช่นนี้แล้วถ้าฉันเข้าใจคำถามของคุณถูกต้องนี่คือคำตอบ

$("#my_id [class='my_class']").addClass('test');

DEMO

ยัง$( "#container" ).find( "div.robotarm" );
เท่ากับ:$( "div.robotarm", "#container" )