jQuery Closest - come funziona?

I jQuery documentation statijQuery Closest - come funziona?

Per ciascun elemento dell'insieme, ottenere il primo elemento che corrisponde al selettore testando l'elemento stesso e traslazione attraverso i suoi antenati nella struttura DOM.

La parola operativa qui, ai miei occhi, è antenato. Il che implicherebbe che se si utilizza

elem.closest(selector)

e il selettore non è un antenato di elem non si troverà nulla. Tuttavia, un po 'più in basso nello stesso documento si legge

viaggia su l'albero del DOM finché non trova una corrispondenza per il selettore fornito

che interpreto nel senso che andrà fino in fondo fino al tag > del corpo per ottenere il suo uomo. Nota, nessuna menzione di genitore o antenato qui.

Ho scritto un rapido fiddle che sembra suggerire che è la precedente affermazione che è corretta. Tuttavia, ho pensato che fosse meglio postare qui e vedere se qualcun altro può confermarlo.

fonte

2013-10-19 DroidOS

Le due affermazioni non si escludono a vicenda, anzi significano la stessa cosa. Andrà sicuramente al tag , andrà a fare la radice del documento. –

Hai ragione, penso. Nessuna delle due affermazioni è sbagliata. Ma questo mi lascia ancora leggermente confuso. Nel mio violino il primo input ha un div con un attributo data-x come antenato immediato e rapporti più vicini che lo trovano. Il secondo input non ha tale div come antenato ma esiste come fratello div del genitore ma non viene trovato – DroidOS

L'attuazione .closest() così (in pseudo codice):

while (node) { 
    if (node matches selector) { 
    return node; 
    } 
    node := node.parentNode 
}

In altre parole, esso attraversa in rispetto solo la catena principale.

fonte

2013-10-19 06:44:03

Lo pseudocodice conferma il comportamento che vedo. 'node: = node.previous' è il modo in cui ho interpretato i documenti. – DroidOS

@DroidOS Questo sarebbe il comportamento di '.prevAll (selector) .first()' :) –

Quando dice "Viaggia sopra l'albero DOM" nella seconda citazione, significa "attraversare attraverso i suoi antenati nell'albero DOM" nella tua prima citazione. Non c'è differenza tra entrambe le dichiarazioni citate; uno è una parafrasi dell'altro che sembra essere leggermente meno specifico.

fonte

2013-10-19 06:39:14 BoltClock

Ma perché in quel caso fa clic sul secondo input nel mio violino - quello che non ha un div con l'attributo data-x come genitore immediato: la cosa più vicina non trova nulla? Se va tutto il modo in cui l'albero DOM dovrebbe avere trovato il div genitore del primo input che DO ha attributo data-x. – DroidOS

@DroidOS: Sì, non trova nulla. Perché dovrebbe aver trovato il genitore del primo input quando * non * è il genitore del secondo input? – BoltClock

Questo è ciò che trovo confuso. Ora stai parlando _parent_. Un minuto fa stavamo parlando di risalire l'albero del DOM. Andando su l'albero del DOM ho capito che significa che ottiene il suo uomo, non importa se è un genitore o no. Nota che i documenti non menzionano affatto il genitore. – DroidOS

jQuery closest() seleziona il primo elemento padre (con il tag HTML) del selettore o il selettore stesso (se corrisponde). È come se si seleziona l'elemento 'p' ($ ('p # someid')), inizia la ricerca dall'elemento 'p' e se non c'è corrispondenza, passa al suo genitore. E così via

Esempio HTML:.

<div id='select_me'>Div 
    <p id='id'>paragraph</p> 
</div>

$ ('# id') più vicino ('div) // selezionerà div # select_me, come più vicino div genitore

dove come

<p id='select_me'>Div 
    <p id='select_me_now'>paragraph</p> 
</p>

$ ('# select_me_now') closest (p); // selezionerà p # select_me_now stesso

fonte

2013-10-19 06:44:43

.closest() ricerca il metodo attraverso questi elementi e i relativi antenati nell'albero DOM e crea un nuovo oggetto jQuery dagli elementi corrispondenti.

Es:

$("li.item-a").closest("ul").css("background-color", "red");

Questo cambierà il colore del livello-2, dato che è il primo incontrato quando si viaggia l'albero DOM.

fonte

2013-10-19 07:09:06 tilak

jQuery Closest - come funziona?

risposta

Problemi correlati