Come posso selezionare un oggetto con classe all'interno di un DIV?

142

Ho il seguente HTML:

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

Voglio essere in grado di utilizzare un selettore che seleziona l'interno div, ma specifico per il mydivcontenitore. Come posso raggiungere questo obiettivo con jQuery?

— Idan Shechter
fonte

285

Provare:

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

Demo di JS Fiddle .

O:

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

Demo di JS Fiddle .

O:

$('#mydiv .myclass');

Demo di JS Fiddle .

Riferimenti:

Buono da imparare dalla find()documentazione:

I metodi .find () e .children () sono simili, tranne per il fatto che quest'ultimo percorre solo un singolo livello lungo l'albero DOM.

— David dice di ripristinare Monica
fonte

2

il secondo due non funzionerà, ma trovare è OK. Il secondo due selezionerà ogni classe = myclass e selezionerà ogni id = mydiv) penso.

— czupe,

2

@czupe: no, mentre l'approccio del selettore di contesto è scritto in modo diverso jQuery implementa internamente lo stesso $('#mydiv').find('.myclass');approccio usato nel primo frammento di codice. Per inciso: '... selezionare ogni id=mydiv'? Ci dovrebbe solo mai essere uno utilizzo di un determinato idin una pagina (una id deve essere univoco all'interno del documento ).

— David dice di ripristinare Monica il

@DavidThomas Beh, ho appena provato $ ('# mydiv .myclass'); e quello ha finito per selezionare tutti i div che hanno la classe myclass anziché solo i div all'interno di mydiv.

— user3281466,

@ user3281466: davvero? Sembra improbabile, puoi riprodurre il tuo problema ?

— David dice di ripristinare Monica il

come verificare la presenza di qualcosa in div e poi inserirlo: not ()

— SuperUberDuper

20

Prova questo

$("#mydiv div.myclass")

— ShankarSangoli
fonte

O se non ti interessa se è un div(o se sarà sempre un div) puoi semplificare a $ ("# mydiv .myclass").

— Michael Mior,

@Michael - Sì, possiamo solo dire .mycalss ma se sappiamo che è un div, div.myclass renderà la ricerca più veloce.

— ShankarSangoli,

@Shankar, molto probabilmente non lo renderà più veloce, piuttosto lento. supponendo che jquery utilizzi sfrigolio e non nativo document.queryselectorallprobabilmente cercherà nello stesso modo e nel tuo caso eseguirà un controllo extra . Possibile che le implementazioni native facciano lo stesso.

— davin

Alcuni test rapidi che ho eseguito suggeriscono che questo dipende dal browser. Sembrava leggermente più veloce in Chrome e leggermente più lento in FF. Ad ogni modo, a meno che tu non stia eseguendo questo selettore più volte o su un gran numero di elementi, la differenza è probabilmente trascurabile. Vedi qui per il mio test grezzo (e forse imperfetto).

— Michael Mior,

@Michael - Se specifichiamo il tagname insieme al nome della classe, userà prima getElementsByTagName e quindi cercherà il nome della classe che vado decisamente più veloce e ancora usando il metodo nativo per fare l'ordinamento di primo livello. È comunque trascurabile se non ci sono molti elementi da selezionare.

— ShankarSangoli,

11

Lo farai allo stesso modo in cui applichi un selettore CSS. Per il momento puoi fare

$("#mydiv > .myclass")

o

$("#mydiv .myclass")

L'ultimo corrisponderà a tutte le myclass all'interno di myDiv, inclusa myclass all'interno di myclass.

— Leandro Galluppi
fonte

6

Se si desidera selezionare tutti gli elementi con l'attributo di classe "myclass" utilizzare

$('#mydiv .myclass');

Se si desidera selezionare solo gli elementi div con l'attributo di classe "myclass" utilizzare

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

scopri di più sui selettori jquery fai riferimento a questi articoli

— e11438
fonte

1

prova questo invece $(".video-divs.focused"). Funziona se stai cercando video-div focalizzati.

— user3749775
fonte