Controlla se qualche antenato ha una classe usando jQuery

156

Esiste un modo in jQuery per verificare se qualche genitore, nonno, bisnonno ha una classe.

Ho una struttura di markup che mi ha lasciato fare questo genere di cose nel codice:

$(elem).parent().parent().parent().parent().hasClass('left')

Tuttavia, per la leggibilità del codice vorrei evitare questo genere di cose. C'è un modo per dire "ogni genitore / nonno / bisnonno ha questa classe"?

Sto usando jQuery 1.7.2.

— crmpicco
fonte

stackoverflow.com/questions/16863917/… - nel caso in cui qualcuno voglia farlo senza jQuery

— Robert Niestroj,

Risposte:

304

if ($elem.parents('.left').length) {

}

— alex
fonte

Grazie, proprio quello di cui avevo bisogno! Per la cronaca, mentre la pratica di trattare .lengthcome un valore veritiero è abbastanza prolifica in JS, è molto più chiara e più facile da capire.length > 0

— dooleyo

Ecco il link per jQuery .parents () documentazione

— H Dog

Esistono molti modi per filtrare gli antenati degli elementi.

if ($elem.closest('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents().hasClass('parentClass')) {/*...*/}
if ($('.parentClass').has($elem).length /* > 0*/) {/*...*/}
if ($elem.is('.parentClass *')) {/*...*/}

Attenzione , il closest() metodo include l'elemento stesso mentre controlla il selettore.

In alternativa, se si dispone di un selettore univoco corrispondente $elem, ad esempio #myElem, è possibile utilizzare:

if ($('.parentClass:has(#myElem)').length /* > 0*/) {/*...*/}
if(document.querySelector('.parentClass #myElem')) {/*...*/}

Se vuoi abbinare un elemento a seconda della sua classe antenata solo a scopo di stile, usa una regola CSS :

.parentClass #myElem { /* CSS property set */ }

— A. Wolff
fonte

Potrei osare dire (senza testarlo) che questo metodo è migliore. Elem.parents attraverserà l'intero dom dom strucutre, dove il più vicino () dovrebbe (probabilmente) fermarsi quando trova il genitore più vicino con quell'elemento ed è quindi più efficiente. Questa è un'ipotesi non istruita. Di solito uso il più vicino (). Sembra che abbia trovato un nuovo argomento da ricercare per il mio blog! : P

— dudewad,

@dudewad sì, ma è abbastanza recente. Voglio dire nella vecchia versione jq, AFAIK, non era così. Il ciclo dei genitori non è stato interrotto sul primo genitore associato usando il più vicino (), ma ora lo è. (non so da quale versione di jq ma sono abbastanza sicuro di essere corretto su questa affermazione)

— A. Wolff

Buono a sapersi, grazie per le informazioni. Strano che non avrebbero costruito la rottura dalla prima versione.

— Dudewad,

quando non ci sono genitori da trovare, i genitori () è più veloce del più vicino () jsperf.com/closest-vs-parents-foobar

— Alex

@Alex Davvero abbastanza interessante, grazie per l'input! BTW, rileggendo la questione, Is there any way in jQuery to check if any parent,..., closest()controllo per elemento stesso, quindi questo non è davvero rispondendo domanda, OP potrebbe desiderare di escludere explecitely l'elemento stesso, in modo da ya, la risposta era quella di utilizzare.parents()

— A. Wolff

È possibile utilizzare il parentsmetodo con il .classselettore specificato e verificare se uno di essi corrisponde:

if ($elem.parents('.left').length != 0) {
    //someone has this class
}

— Igor Dymov
fonte