Como posso selecionar um item com classe dentro de um DIV?

142

Eu tenho o seguinte HTML:

<div id="mydiv">
  <div class="myclass"></div>
</div>

Quero poder usar um seletor que selecione o interior div, mas específico para o mydivcontêiner. Como posso conseguir isso com o jQuery?

javascript jquery html class jquery-selectors Idan Shechter
fonte

Respostas:

285

Experimentar:

$('#mydiv').find('.myclass');

Demonstração JS Fiddle .

Ou:

$('.myclass','#mydiv');

Demonstração JS Fiddle .

Ou:

$('#mydiv .myclass');

Demonstração JS Fiddle .

Referências:

É bom aprender com a find()documentação:

Os métodos .find () e .children () são semelhantes, exceto que o último viaja apenas um único nível na árvore do DOM.

David diz para restabelecer Monica
fonte
2
o segundo dois não funcionará, mas encontrar está OK. O segundo dois selecionará todas as classes = myclass e todos os id = mydiv).
czupe
2
@czupe: não, enquanto a abordagem do seletor de contexto é escrita de forma diferente, o jQuery implementa internamente a mesma $('#mydiv').find('.myclass');abordagem usada no primeiro trecho de código. Aliás: '... selecione todos id=mydiv'? Não só deve nunca ser um uso de um dado idem uma página (um id deve ser único dentro do documento ).
David diz que restabelece Monica
@DavidThomas Bem, eu apenas tentei $ ('# mydiv .myclass'); e isso acabou selecionando todas as divs que possuem a classe myclass em vez de apenas as divs dentro de mydiv.
user3281466
@ user3281466: sério? Parece improvável, você pode reproduzir seu problema ?
David diz que restabelece Monica
Como você verificar se há alguma coisa em pelo div e, em seguida, colocá-lo em: não ()
SuperUberDuper
20

Tente isto

$("#mydiv div.myclass")
ShankarSangoli
fonte
Ou, se você não se importa se é um div(ou se sempre será um div), você pode simplificar para $ ("# mydiv .myclass").
Michael Mior
@ Michael - Sim, podemos apenas dizer .mycalss, mas se soubermos que é uma div, div.myclass tornará a pesquisa mais rápida.
precisa saber é o seguinte
@ Shankar, provavelmente não o tornará mais rápido, mas mais lento. supondo que o jquery use sizzle e não um nativo document.queryselectorall, provavelmente pesquisará da mesma maneira e, no seu caso, executará uma verificação extra . É possível que implementações nativas façam o mesmo.
davin
Alguns testes rápidos que eu executei sugerem que isso depende do navegador. Apareceu marginalmente mais rápido no Chrome e marginalmente mais lento no FF. De qualquer forma, a menos que você esteja executando esse seletor várias vezes ou em um grande número de elementos, a diferença provavelmente é insignificante. Veja aqui o meu teste bruto (e possivelmente defeituoso).
Michael Mior
@ Michael - Se especificarmos o tagname juntamente com o nome da classe, ele primeiro usará getElementsByTagName e, em seguida, procurará o nome da classe, que será definitivamente mais rápido e ainda usará o método nativo para fazer a classificação do primeiro nível. De qualquer forma, é insignificante se não houver muitos elementos a serem selecionados.
perfil completo de
11

Você fará da mesma maneira que aplicaria um seletor de css. Por instanse você pode fazer

$("#mydiv > .myclass")

ou

$("#mydiv .myclass")

O último corresponderá a todas as minhas classes dentro do myDiv, incluindo as classes dentro da minha classe.

Leandro Galluppi
fonte
6

Se você quiser selecionar todos os elementos que possuam o atributo de classe "myclass", use

$('#mydiv .myclass');

Se você deseja selecionar apenas elementos div que possuam o atributo de classe "myclass", use

$("div#mydiv div.myclass");

saiba mais sobre os seletores jquery consulte esses artigos

e11438
fonte
1

tente isso em seu lugar $(".video-divs.focused"). Isso funciona se você estiver procurando por vídeo-divs focados.

user3749775
fonte