JQuery trova il primo elemento genitore con un prefisso di classe specifico

124

Voglio ottenere il primo genitore che ha un prefisso di classe specifico, supponiamo:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

Ad esempio, il mio elemento corrente è #divide voglio trovare il primo elemento che ha il prefisso di classe div-a. Quindi in pratica selezionerà:

<div class="div-a89892">

jquery jquery-selectors

— Viaggio nel tempo
fonte

Fermare. Usa più classi, invece di combinare le informazioni in una sola classe. Il selettore di "corrispondenza" è lento e questo design non scala per eventuali modifiche. <div class='a'>, quindi fornisci regole per div.a. Non so affatto perché stai inserendo divil nome della classe, in realtà.

— Stefan Kendall

Tuttavia, non unire i dati in prefissi di classe. Questo è un modello terribile ed è facilmente risolvibile con più classi.

— Stefan Kendall

@StefanKendall: A volte hai a che fare con la schifezza di terze parti di altri, ea volte stai supportando app legacy che non puoi risolvere rapidamente. Il cattivo design è un dato di fatto, e questa è una domanda perfettamente legittima.

— Nerdmaster

Risposte:

222

Utilizzare .closest()con un selettore:

var $div = $('#divid').closest('div[class^="div-a"]');

— Matt Ball
fonte

A proposito, non ho idea del motivo per cui questo è stato downvoted Il selettore di classe-prefix è fragile, ma sarà funzionerà.

— Matt Ball

Per OP: assicurati che l'elemento che stai cercando sia un genitore da qualche parte nell'albero DOM e non un fratello o simile all'oggetto che stai cercando (come da documentazione). Non è "il più vicino da nessuna parte nel documento" ma "il più vicino lavorando sull'albero DOM".

— Christian P.

Non funziona per me. Inoltre, voglio trovare il primo elemento che ha un prefisso specifico, che non deve essere un elemento div.

— Viaggio nel tempo

@Time quindi rimuovere il divselettore di elementi: $('#divid').closest('[class^="div-a"]'). Come ha commentato @Stefan, però, dovresti davvero usare più classi.

— Matt Ball

Questo selettore richiede una quantità assurda di cicli (ma può comunque essere veloce). Se hai bisogno di supportare IE6, IE7 o IE8, questo può davvero fregarti se il tuo DOM diventa troppo grande; IE visualizza la finestra di dialogo "lo script non risponde" quando viene eseguito un certo numero di istruzioni JS VM, e NON dopo un certo periodo di tempo. Ho visto script che completano in 0,1 ms Internet Explorer in crash proprio per questo motivo.

— Stefan Kendall

Jquery in seguito ti ha permesso di trovare i genitori con il .parents()metodo.

Quindi consiglio di usare:

var $div = $('#divid').parents('div[class^="div-a"]');

Ciò fornisce tutti i nodi padre che corrispondono al selettore. Per ottenere il primo genitore che corrisponde al selettore usa:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

Per altre query di attraversamento DOM simili, controlla la documentazione sull'attraversamento del DOM .

— Sunny R Gupta
fonte

La risposta non è fuorviante, mostra solo un'altra alternativa a .closest (), .parents () sembra più leggibile ed è un'altra soluzione al problema.

— Sunny R Gupta

Closest è una soluzione migliore di questa in quanto più vicino troverà solo la prima corrispondenza, mentre i genitori troveranno TUTTE le corrispondenze risalendo il DOM. Ovviamente più efficiente da usare più vicino, anche se sono d'accordo, non è la funzione con il nome migliore.

— Mog0

Abbastanza divertente, ho finito per utilizzare questa soluzione poiché .parentsUtil () non funzionava come mi aspettavo.

— Mark Handy