¿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

Respuestas:

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