jquery, bộ chọn cho lớp trong id

Dưới đây, làm cách nào để chọn các phần tử có chứa lớp my_classtrong phần tử với id = "my_id"?

Lưu ý rằng phần tử cũng có thể có một lớp khác mà tôi không chọn.

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

đã cố gắng

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

Bạn có thể sử dụng bộ chọn lớp cùng với bộ chọn con cháu

$("#my_id .my_class")

Chỉ cần sử dụng bộ chọn lớp đơn giản.

$('#my_id .my_class')

Không quan trọng nếu phần tử cũng có các lớp khác. Nó có lớp .my_class và nó ở đâu đó bên trong #my_id , vì vậy nó sẽ khớp với bộ chọn đó.

Về hiệu suất

Theo tài liệu về hiệu suất của bộ chọn jQuery , sẽ nhanh hơn nếu sử dụng riêng hai bộ chọn, như sau:

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

Đây là phần liên quan của tài liệu:

Bộ chọn dựa trên ID

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

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

Cách .find()tiếp cận này nhanh hơn vì lựa chọn đầu tiên được xử lý mà không cần thông qua công cụ chọn Sizzle - các lựa chọn chỉ dành cho ID được xử lý bằng cách sử dụng document.getElementById(), điều này cực kỳ nhanh vì nó có nguồn gốc từ trình duyệt.

Việc chọn theo ID hoặc chỉ theo lớp (trong số những thứ khác) sẽ gọi các chức năng do trình duyệt cung cấp như document.getElementById()là khá nhanh, trong khi sử dụng bộ chọn con sẽ gọi công cụ Sizzle như đã đề cập, mặc dù nhanh nhưng chậm hơn so với phương án thay thế được đề xuất.

Luôn luôn sử dụng

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

thay vì

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

Hãy xem các Quy tắc Hiệu suất JQuery .

Cũng tại Jquery Doc

Tôi nghĩ rằng yêu cầu của bạn chỉ chọn <span class = "my_class">hello</span>phần tử này, Bạn phải làm như thế này, Nếu tôi hiểu câu hỏi của bạn một cách chính xác thì đây là câu trả lời,

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

DEMO

Cũng $( "#container" ).find( "div.robotarm" );
bằng:$( "div.robotarm", "#container" )