¿Cómo encontrar un padre con una clase conocida en jQuery?

244

Tengo un <div>que tiene muchos otros <div>s dentro, cada uno en un nivel de anidamiento diferente. En lugar de darle a cada niño <div>un identificador, prefiero simplemente darle <div>el identificador a la raíz . Aquí hay un ejemplo:

<div class="a" id="a5">
  <div class="b">
    <div class="c">
      <a class="d">
      </a>
    </div>
  </div>
</div>

Si escribo una función en jQuery para responder a la clase dy quiero encontrar el ID de su clase principal a, ¿cómo lo haría?

No puedo simplemente hacer $('.a').attr('id');, porque hay varias clases as. Podría encontrar la ID de su padre, pero parece que tiene un diseño pobre, lento y no muy polimórfico (tendría que escribir un código diferente para encontrar la ID de la clase c).

— John Smith
fuente

490

Asumiendo que thises así .d, puedes escribir

$(this).closest('.a');

El closestmétodo devuelve el elemento primario más interno de su elemento que coincide con el selector.

— SLaks
fuente

47

Tenga en cuenta que hay pocas trampas: si su elemento inicial coincide con la consulta también, no obtiene el elemento primario sino el mismo elemento. Esto puede o no ser un comportamiento deseado. Si no, recomiendo esto: $ (this) .parent () .arest ('. A');

— Risord

1

Muy útil. Siempre solía hacer $ (this) .parent (). Parent (). Parent () y sabía que había una mejor solución.

— Wang'l Pakhrin

28

Pase un selector a la función de padres jQuery :

d.parents('.a').attr('id')

EDITAR Hmm, en realidad la respuesta de Slaks es superior si solo quieres el antepasado más cercano que coincida con tu selector.

— Drew Noakes
fuente

8

Puede usar parents () para obtener todos los padres con el selector dado.

Descripción: Obtenga los antepasados de cada elemento en el conjunto actual de elementos coincidentes, opcionalmente filtrados por un selector.

Pero parent () obtendrá solo el primer padre del elemento.

Descripción: Obtenga el elemento primario de cada elemento en el conjunto actual de elementos coincidentes, opcionalmente filtrado por un selector.

jQuery parent () vs.padres ()

Y hay .parentsUntil () que creo que será el mejor.

Descripción: Obtenga los antepasados de cada elemento en el conjunto actual de elementos coincidentes, hasta el elemento coincidente con el selector, pero sin incluirlo.

— Amr Elgarhy
fuente

Él solo quiere un padre soltero , por lo que debe llamar closest.

— SLaks

2

Utilice .parentsUntil ()

$(".d").parentsUntil(".a");

— jai3232
fuente

Eso se enfocaría en cada elemento padre hasta llegar al elemento padre coincidente.

— Dustin Halstead

0

Extraído de los comentarios de @ Resord arriba. Este funcionó para mí y se inclinó más estrechamente con la pregunta.

$(this).parent().closest('.a');

Gracias

— Anjana Silva
fuente