¿Cómo encontrar un padre con una clase conocida en jQuery?
Tengo un <div>que tiene muchos otros <div>dentro, cada uno en un nivel de anidación diferente. En lugar de darle a cada niño <div>un identificador, prefiero simplemente darle el <div>identificador a la raíz. He aquí 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 haría esto?
No puedo simplemente hacerlo $('.a').attr('id');, porque hay varias clases a. Pude encontrar la identificación de los padres de sus padres, pero parece tener un diseño deficiente, lento y no muy polimórfico (tendría que escribir un código diferente para encontrar la identificación de la clase c).
Suponiendo que thissea así .d, puedes escribir
$(this).closest('.a');
El closestmétodo devuelve el padre más interno de su elemento que coincide con el selector.
Pase un selector a la función principal de jQuery :
d.parents('.a').attr('id')
EDITAR Hmm, en realidad la respuesta de Slaks es superior si solo desea el antepasado más cercano que coincida con su selector.
Puedes usar padres() para obtener todos los padres con el selector dado.
Descripción: obtiene 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: obtiene el padre de cada elemento en el conjunto actual de elementos coincidentes, opcionalmente filtrado por un selector.
jQuery padre() frente a padres()
Y está .parentsUntil() que creo que será el mejor.
Descripción: obtiene los antepasados de cada elemento en el conjunto actual de elementos coincidentes, hasta el elemento coincidente por el selector, pero sin incluirlo.
Extraído de los comentarios anteriores de @Resord. Este funcionó para mí y se inclinó más estrechamente con la pregunta.
$(this).parent().closest('.a');
Gracias
<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')
Espero que esto ayude a alguien.
