¿Cómo puedo seleccionar un elemento con clase dentro de un DIV?

142

Tengo el siguiente HTML:

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

Quiero poder usar un selector que seleccione el interior div, pero específico para el mydivcontenedor. ¿Cómo puedo lograr esto con jQuery?

javascript jquery html class jquery-selectors Idan Shechter
fuente

Respuestas:

285

Tratar:

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

Demostración de JS Fiddle .

O:

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

Demostración de JS Fiddle .

O:

$('#mydiv .myclass');

Demostración de JS Fiddle .

Referencias

Es bueno aprender de la find()documentación:

Los métodos .find () y .children () son similares, excepto que este último solo viaja un solo nivel hacia abajo en el árbol DOM.

David dice reinstalar a Mónica
fuente
2
el segundo dos no funcionará, pero encontrar está bien. El segundo dos seleccionará cada clase = myclass y seleccionará cada id = mydiv), creo.
czupe
2
@czupe: no, mientras que el enfoque de selector de contexto se escribe de manera diferente, jQuery implementa, internamente, el mismo $('#mydiv').find('.myclass');enfoque que se utilizó en el primer fragmento de código. Por cierto: '... seleccionar cada id=mydiv'? Sólo debe nunca ser un uso de una determinada iden una página (una id debe ser único dentro del documento ).
David dice que reinstale a Mónica el
@DavidThomas Bueno, acabo de probar $ ('# mydiv .myclass'); y eso terminó seleccionando todos los divs que tienen la clase myclass en lugar de solo los divs dentro de mydiv.
user3281466
@ user3281466: ¿en serio? Eso parece poco probable, ¿puedes reproducir tu problema ?
David dice que reinstale a Mónica el
cómo verificar cualquier cosa en div y luego ponerla en: not ()
SuperUberDuper
20

Prueba esto

$("#mydiv div.myclass")
ShankarSangoli
fuente
O si no le importa si es un div(o si siempre será un div), puede simplificar a $ ("# mydiv .myclass").
Michael Mior
@Michael: Sí, podemos decir .mycalss pero si sabemos que es un div, div.myclass hará que la búsqueda sea más rápida.
ShankarSangoli
@Shankar, lo más probable es que no lo haga más rápido, sino más lento. suponiendo que jquery use sizzle y no un nativo document.queryselectorall, probablemente buscará de la misma manera y, en su caso, realizará una verificación adicional . Posible que las implementaciones nativas hagan lo mismo.
davin
Algunas pruebas rápidas que ejecuté sugieren que esto depende del navegador. Parecía marginalmente más rápido en Chrome y marginalmente más lento en FF. De cualquier manera, a menos que esté ejecutando este selector muchas veces o sobre una gran cantidad de elementos, la diferencia es probablemente insignificante. Vea aquí mi prueba cruda (y posiblemente defectuosa).
Michael Mior
@Michael: si especificamos el nombre de la etiqueta junto con el nombre de la clase, primero usará getElementsByTagName y luego buscará el nombre de la clase, que definitivamente es más rápido y sigue usando el método nativo para ordenar el primer nivel. De todos modos, es insignificante si no hay muchos elementos para seleccionar.
ShankarSangoli
11

Lo hará de la misma manera que aplicaría un selector CSS. Por un momento puedes hacer

$("#mydiv > .myclass")

o

$("#mydiv .myclass")

El último coincidirá con cada clase de myDiv, incluida myclass dentro de myclass.

Leandro Galluppi
fuente
6

Si desea seleccionar cada elemento que tenga el atributo de clase "myclass" use

$('#mydiv .myclass');

Si desea seleccionar solo elementos div que tengan el atributo de clase "myclass", use

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

encuentre más sobre los selectores de jquery consulte estos artículos

e11438
fuente
1

intente esto en su lugar $(".video-divs.focused"). Esto funciona si está buscando video-divs enfocados.

usuario3749775
fuente