¿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?

— Idan Shechter
fuente

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

find().
Selector de contexto .

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