¿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).

javascript jquery html dom parent 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

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

Respuestas: