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")

Просто используйте простой селектор классов.

$('#my_id .my_class')

Неважно, есть ли у элемента другие классы. У него есть класс .my_class , и он находится где-то внутри #my_id , поэтому он будет соответствовать этому селектору.

Что касается производительности

Согласно документации по производительности селектора jQuery , быстрее использовать два селектора отдельно, например:

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

Вот соответствующая часть документации:

Селекторы на основе идентификатора

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

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

Этот .find()подход работает быстрее, потому что первый выбор обрабатывается без прохождения механизма выбора Sizzle - выбор только по идентификатору обрабатывается с использованием document.getElementById(), что очень быстро, потому что оно встроено в браузер.

Выбор только по идентификатору или только по классу (среди прочего) вызывает функции, предоставляемые браузером, например, 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" )