jquery, selector de clase dentro de id

91

A continuación, ¿cómo debo seleccionar los elementos que contienen la clase my_classdentro del elemento con id = "my_id"?

Tenga en cuenta que el elemento también puede tener otra clase, que no estoy seleccionando.

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

estaba intentando

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

Respuestas:

150

Puede usar el selector de clases junto con el selector descendiente

$("#my_id .my_class")
Arun P Johny
fuente
¿Puedo combinar esto con: primero (para obtener el primer elemento de esa clase dentro de #my_id)?
jakob.j
1
@ jakob.j$("#my_id .my_class:first")
Arun P Johny
¿Puedo usar lo mismo para la clase que id como $ (". My_class #my_id") cuando el id se define dentro de la clase
dhS
48

Simplemente use el selector de clase simple.

$('#my_id .my_class')

No importa si el elemento también tiene otras clases. Tiene la clase .my_class , y está en algún lugar dentro de #my_id , por lo que coincidirá con ese selector.

Respecto al desempeño

De acuerdo con la documentación de rendimiento del selector de jQuery , es más rápido usar los dos selectores por separado, así:

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

Aquí está la parte relevante de la documentación:

Selectores basados ​​en ID

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

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

El .find()enfoque es más rápido porque la primera selección se maneja sin pasar por el motor de selección de Sizzle; las selecciones de solo ID se manejan usando document.getElementById(), que es extremadamente rápido porque es nativo del navegador.

Seleccionar por ID o solo por clase (entre otras cosas) invoca funciones proporcionadas por el navegador document.getElementById()que son bastante rápidas, mientras que usar un selector descendente invoca el motor Sizzle como se mencionó que, aunque rápido, es más lento que la alternativa sugerida.

doppelgreener
fuente
1

Creo que estás pidiendo seleccionar solo <span class = "my_class">hello</span>este elemento, tienes que hacer esto, si entiendo tu pregunta correctamente, esta es la respuesta,

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

DEMO

Thirumalai murugan
fuente
$("#my_id .my_class")es el equivalente más corto; en este caso, no gana nada usando el selector de atributos.
doppelgreener
Espero que también haya hecho el mismo trabajo que tu respuesta, mientras respondo la pregunta que respondiste, no me he dado cuenta de que desde que respondí no he eliminado la pregunta.
Thirumalai murugan
1

También $( "#container" ).find( "div.robotarm" );
es igual a:$( "div.robotarm", "#container" )

Pasha Oleynik
fuente