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

Ответ 1

Вы можете использовать селектор и селектор потомков

$("#my_id .my_class")

Ответ 2

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

$('#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(), что очень быстро, потому что оно является родным для браузера.

Выбор по ID или по классу сам по себе (помимо всего прочего) вызывает функции, предоставляемые браузером, такие как document.getElementById(), которые довольно быстры, в то время как с помощью селектора запускает движок Sizzle, упомянутый, хотя и быстрый, медленнее, чем предлагаемая альтернатива.

Ответ 3

Всегда используйте

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

вместо

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

Посмотрите на Правила производительности JQuery.

Также в JQuery Doc

Ответ 4

Я думаю, что ваш запрос выбрать только <span class = "my_class">hello</span> этот элемент, вы делаете это, если я правильно понимаю ваш вопрос, это ответ,

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

DEMO