jquery, seletor de classe dentro de id

Abaixo, como devo selecionar os elementos que contêm a classe my_classdentro do elemento com id = "my_id"?

Observe que o elemento também pode ter outra classe, para a qual não estou selecionando.

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

estava tentando

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

Você pode usar o seletor de classe junto com o seletor descendente

$("#my_id .my_class")

Basta usar o seletor de classe comum.

$('#my_id .my_class')

Não importa se o elemento também possui outras classes. Ele tem a classe .my_class e está em algum lugar dentro de #my_id , então ele vai corresponder a esse seletor.

Em relação ao desempenho

De acordo com a documentação de desempenho do seletor jQuery , é mais rápido usar os dois seletores separadamente, como este:

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

Aqui está a parte relevante da documentação:

Seletores baseados em ID

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

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

A .find()abordagem é mais rápida porque a primeira seleção é tratada sem passar pelo mecanismo do seletor Sizzle - as seleções apenas de ID são feitas usando document.getElementById(), que é extremamente rápido porque é nativo do navegador.

Selecionar por ID ou apenas por classe (entre outras coisas) invoca funções fornecidas pelo navegador, como as document.getElementById()quais são bastante rápidas, enquanto usar um seletor descendente invoca o motor Sizzle conforme mencionado que, embora rápido, é mais lento do que a alternativa sugerida.

Sempre use

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

ao invés de

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

Dê uma olhada em Regras de desempenho JQuery .

Também no Jquery Doc

Eu acho que você está pedindo para selecionar apenas <span class = "my_class">hello</span>este elemento, Você tem que fazer assim, Se eu entendi sua pergunta corretamente, esta é a resposta,

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

DEMO

Também $( "#container" ).find( "div.robotarm" );
é igual a:$( "div.robotarm", "#container" )