¿Cómo seleccionar el primer DIV principal usando jQuery?

95

var classes = $(this).attr('class').split(' '); // this gets the current element classes

var classes = $(this).parent().attr('class').split(' '); // this gets the parent classes.

El padre en la situación anterior es un ankor.

Si quisiera obtener el primer DIV principal de $ (esto), ¿cómo se vería el código?

var classes = $(this).div:parent().attr('class').split(' '); // just a quick try.

* Básicamente quiero obtener las clases del primer padre DIV de $ (esto).

Gracias

javascript jquery css-selectors

— Adán
fuente

161

Úselo .closest()para recorrer el árbol DOM hasta el selector especificado.

var classes = $(this).parent().closest('div').attr('class').split(' '); // this gets the parent classes.

— Shef
fuente

10

parents("div")está atravesando y devuelve todos los div padre que debe usar .eq(0)después para asegurarse de que devuelva solo el que desea

— meo

3

Recuerde que es mejor para el rendimiento .parents('div').eq(0): usar ese selector de CSS de bolso SEGUIDO por jQuery para filtrar solo el primer elemento le dará un ligero aumento de rendimiento; consulte la sección 'Notas adicionales' en jQuery: eq doc

— Noah Whitmore

@NoahWhitmore Lo arregló. Se usa closest()para que no devuelva todos los padres excepto el divpadre.

— Shef

41

Use .closest(), que obtiene el primer elemento ancestro que coincide con el selector dado 'div':

var classes = $(this).closest('div').attr('class').split(' ');

EDITAR:

Como señaló @Shef, .closest()devolverá el elemento actual si también es un DIV. Para tener eso en cuenta, use .parent()primero:

var classes = $(this).parent().closest('div').attr('class').split(' ');

— Tatu Ulmanen
fuente

5

.closest()coincidirá con sí mismo si $(this)es un elemento DIV.

— Shef

@Shef, esa era información nueva para mí, gracias. Edité mi respuesta para reflejar esto.

— Tatu Ulmanen

3

simplemente podría usar.parents("div").eq(0)

— meo

8

Esto obtiene parent si es un div. Entonces se pone clase.

var div = $(this).parent("div");
var _class = div.attr("class");

— Esben
fuente

1

@meo Eso es lo que hacía la pregunta.

— Daniel West

3

¡Mantenlo simple!

var classes = $(this).parent('div').attr('class');

— Daniel West
fuente

0

dos de las mejores opciones son

$(this).parent("div:first")

$(this).parent().closest('div')

y, por supuesto, puedes encontrar el atributo de clase por

$(this).parent("div:first").attr("class")

$(this).parent().closest('div').attr("class")

— Junaid Masood
fuente