Come trovare un genitore con una classe nota in jQuery?

244

Ho una <div>che ha molte altre <div>al suo interno, ognuna con un diverso livello di annidamento. Piuttosto che dare a ogni bambino <div>un identificatore, preferisco semplicemente dare alla radice <div>l'identificatore. Ecco un esempio:

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

Se scrivo una funzione in jQuery per rispondere alla classe de voglio trovare l'ID per il suo genitore, classe a, come farei?

Non posso semplicemente farlo $('.a').attr('id');, perché ci sono più classi a. Potrei trovare l'ID del genitore del genitore del genitore, ma sembra di design scadente, lento e non molto polimorfico (dovrei scrivere un codice diverso per trovare l'ID per la classe c).

— John Smith
fonte

490

Supponendo che thissia .dpossibile scrivere

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

Il closestmetodo restituisce il genitore più interno del tuo elemento che corrisponde al selettore.

— SLaks
fonte

47

Nota che c'è poca cattura: se anche l'elemento iniziale corrisponde alla query, non ottieni l'elemento genitore ma lo stesso elemento. Questo può o meno essere un comportamento desiderato. In caso contrario, consiglio questo: $ (questo) .parent (). Più vicino ('. A');

— Risord,

1

Molto utile. Uso sempre $ (this) .parent (). Parent (). Parent () e sapevo che esisteva una soluzione migliore.

— Wang'l Pakhrin,

28

Passa un selettore alla funzione genitori jQuery :

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

MODIFICA Hmm, in realtà la risposta di Slaks è superiore se vuoi solo l'antenato più vicino che corrisponde al tuo selettore.

— Drew Noakes
fonte

8

Puoi usare i genitori () per ottenere tutti i genitori con il selettore indicato.

Descrizione: ottiene gli antenati di ciascun elemento nell'insieme corrente di elementi corrispondenti, filtrati facoltativamente da un selettore.

Ma parent () otterrà solo il primo genitore dell'elemento.

Descrizione: ottiene il genitore di ciascun elemento nell'insieme corrente di elementi corrispondenti, eventualmente filtrato da un selettore.

jQuery parent () vs. parent ()

E c'è .parentsUntil () che penso sia il migliore.

Descrizione: ottiene gli antenati di ogni elemento nell'insieme corrente di elementi corrispondenti, fino a ma non includendo l'elemento corrispondente dal selettore.

— Amr Elgarhy
fonte

Vuole solo un genitore single , quindi dovrebbe chiamare closest.

— SL

2

Usa .parentsUntil ()

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

— jai3232
fonte

Questo avrebbe come target ogni elemento genitore fino a raggiungere l'elemento genitore corrispondente.

— Dustin Halstead,

0

Estratto dai commenti di @ Resord sopra. Questo ha funzionato per me e più vicino alla domanda.

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

Grazie

— Anjana Silva
fonte