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

Tengo un <div> que tiene muchos otros <div> dentro de él, cada uno en un nivel de anidamiento diferente. En lugar de dar un identificador a cada <div> hijo, prefiero simplemente darle el identificador al <div> 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 d y quiero encontrar el ID de su elemento padre, clase a, ¿cómo lo haría?

No puedo simplemente hacer $ ('.a').attr('id');, porque hay múltiples clases a. Podría encontrar el ID del padre del padre del padre, pero eso parece un mal diseño, lento y no muy polimórfico (tendría que escribir código diferente para encontrar el ID de la clase c).

Respuesta #1

Suponiendo que this es .d, puedes escribir

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

El método closest devuelve el padre más interno de tu elemento que coincide con el selector.

Respuesta #2

Pasa un selector a la función parents de jQuery:

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

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

Respuesta #3

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

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

Gracias

Respuesta #4

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

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

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

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

jQuery parent() vs. parents()

Y está .parentsUntil() que creo que será lo mejor.

Descripción: Obtén los antepasados de cada elemento en el conjunto actual de elementos coincidentes, hasta pero sin incluir el elemento que coincide con el selector.

Respuesta #5

<div id="412412412" class="input-group date">
     <div class="input-group-prepend">
          <button class="btn btn-danger" type="button">Button Click</button>
          <input type="text" class="form-control" value="">
      </div>
</div>

En mi situación, uso este código:

$(this).parent().closest('.date').attr('id')