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?

— Idan Shechter
fonte

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:

find().
Contexto do seletor .

É 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