jquery, selettore per classe all'interno di id

91

Di seguito, come devo selezionare gli elementi che contengono la classe my_classall'interno dell'elemento conid = "my_id" ?

Nota che l'elemento può anche avere un'altra classe, che non sto selezionando.

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

stavo provando

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

jquery

— user984003
fonte

150

È possibile utilizzare il selettore di classe insieme al selettore discendente

$("#my_id .my_class")

— Arun P Johny
fonte

Posso combinarlo con: first (per ottenere il primo elemento di quella classe all'interno di #my_id)?

— jakob.j

1

@ jakob.j$("#my_id .my_class:first")

— Arun P Johny

Posso usare lo stesso per la classe di id come $ (". My_class #my_id") quando id è definito all'interno della classe

— dhS

48

Basta usare il semplice selettore di classe.

$('#my_id .my_class')

Non importa se l'elemento ha anche altre classi. Ha la classe .my_class , ed è da qualche parte all'interno di #my_id , quindi corrisponderà a quel selettore.

Per quanto riguarda le prestazioni

Secondo la documentazione sulle prestazioni del selettore jQuery , è più veloce usare i due selettori separatamente, in questo modo:

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

Ecco la parte rilevante della documentazione:

Selettori basati su ID
// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );
L' .find()approccio è più veloce perché la prima selezione viene gestita senza passare attraverso il motore di selezione di Sizzle: le selezioni solo ID vengono gestite utilizzando document.getElementById(), che è estremamente veloce perché è nativo del browser.

La selezione per ID o solo per classe (tra le altre cose) richiama funzioni fornite dal browser come document.getElementById()che sono piuttosto rapide, mentre l'uso di un selettore discendente richiama il motore Sizzle come accennato che, sebbene veloce, è più lento dell'alternativa suggerita.

— doppelgreener
fonte

12

Usa sempre

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

invece di

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

Dai un'occhiata alle regole delle prestazioni di JQuery .

Anche da Jquery Doc

— Niks Jain
fonte

1

Penso che tu stia chiedendo di selezionare solo <span class = "my_class">hello</span>questo elemento, devi fare così, se ho capito correttamente la tua domanda questa è la risposta,

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

DEMO

— Thirumalai murugan
fonte

$("#my_id .my_class")è l'equivalente più breve; in questo caso non si guadagna nulla dall'utilizzo del selettore di attributi.

— doppelgreener

Spero che anche tu abbia fatto lo stesso lavoro della tua risposta, mentre rispondo alla domanda a cui hai risposto, non ho notato che da quando ho risposto non ho cancellato la domanda.

— Thirumalai murugan

1

Inoltre $( "#container" ).find( "div.robotarm" );
è uguale a:$( "div.robotarm", "#container" )

— Pasha Oleynik
fonte