Differenza tra $ ('# schede a') e $ ('# schede'). Find ('a')

Question

Ho seguente struttura

<ul id="tabs" class="nav nav-tabs"> 
    <li><a href="#aaa" hashval="aaa">AAA</a></li> 
    <li><a href="#bbb" hashval="bbb">BBB</a></li> 
    <li><a href="#ccc" hashval="ccc">CCC</a></li> 
    <li><a href="#ddd" hashval="ddd">DDD</a></li> 
</ul> 

Ora sono operativi sul tag di ancoraggio dal seguente codice e che sta funzionando bene.

$('#tabs a[href="#ddd"]').tab('show'); 

Sto usando PyCharm che aggiunge avvertimento per la linea dicendo "Prefazione con selettore ID". Quando faccio clic su di esso, pycharm cambia in seguito

$('#tabs').find('a[href="#ddd"]').tab('show'); 

Entrambi funzionano bene ma non capisco la differenza.

Qual è la differenza in entrambi o più specificamente in cosa consiste la differenza tra $('#tabs a[href="#ddd"]') e $('#tabs').find('a[href="#ddd"]')?

Answer 1

$("#tabs a") viene valutata da destra a sinistra - che è la direzione nativo sia Sizzle motore selettore e querySelectorAll - cioè prima che trova tutti degli elementi di ancoraggio nella pagina e restringe a quelli sotto #tabs.

$("#tabs").find("a") valuta il - più intuitivo - da sinistra a destra , cioè prima che trova #tabs, e quindi solo gli elementi di ancoraggio sotto di essa.

Chiaramente quest'ultimo produrrebbe better performance, ma sarebbe visibile solo in modo cumulativo; cioè, se gestisci migliaia di query. Altrimenti, la differenza è trascurabile.

Answer 2

Il secondo è MOLTO più veloce. Il motivo del selettore di jQuery enginge Sizzle, che attraversa la selezione da a destra a lasciato, non viceversa.

Ciò significa che il selettore

$('#tabs a[href="#ddd"]') 

Prima interroga il documento DOM per un tag, che contiene l'attributo href insieme a #ddd. Quindi li filtra tutti, per ottenere ognuno che sia un tag <a>. Infine, attraversa l'albero DOM per ogni nodo, cercando di trovare un genitore #tabs.

Immagina un sito con 1.000 tag con href="#ddd", come sarebbe tremendamente lento.

THEN.

L'altra variante suggerita da pycharm è quella di individuare innanzitutto un elemento #tabs. Questo è super veloce, dal momento che jQuery può utilizzare il metodo browser nativo getElementById(). Avendo questo nodo, può attraversare in basso per trovare tutti i tag corrispondenti. In questo modo, non all tags in the whole DOM-tree, deve essere controllato. Solo quelli che effettivamente sono in #tabs.

Per ulteriori informazioni, consultare this page in the documentation.

Answer 3

L'effetto è lo stesso: Trova ancore che hanno il valore #ddd come href e sono un discendente di #tabs. La differenza sta nel modo di raggiungere questo obiettivo.

La prima soluzione trova gli ancoraggi e quindi verifica se sono un discendente di #tabs.

La seconda soluzione trova #tabs e quindi trova gli ancoraggi. Quale dovrebbe essere più veloce, ovviamente.

Answer 4

.find() è meglio prestazioni saggia rispetto al primo selettore

$('#tabs a[href="#ddd"]').tab('show'); 

, è per questo che PyCharm cambia al selettore utilizzando .find()

$('#tabs').find('a[href="#ddd"]').tab('show'); 

http://vaughnroyko.com/the-real-scoop-on-jquery-find-performance/

Answer 5

Come indicato nel "Increase Specificity from Left to Right" :

Una piccola conoscenza del motore di selezione di jQuery è utile. Funziona dall'ultimo selettore primo modo, nei vecchi browser, una ricerca del tipo:

$("p#intro em"); 

carica ogni elemento em in una matrice. Funziona quindi con i genitori di ogni nodo e rifiuta quelli in cui non è possibile trovare p # intro. La query sarà particolarmente inefficiente se si dispone di centinaia di tag em su della pagina.

A seconda del documento, la query può essere ottimizzata recuperando prima il selettore più qualificato . Può quindi essere utilizzato come punto di partenza per i selettori secondari, ad es.

$("em", $("p#intro")); // or 
$("p#intro").find("em"); 

Ma Test case dice $("#tabs > a") sarebbe più veloce

Answer 6

La differenza è che la trovano() permette di filtrare su una serie di elementi sulla base di una selezione che hai già fatto, di ritorno e matrice di elementi, se questo è il caso.

$('#tabs').find('a[href=“#ddd”]'); 

Ed è un modo più specifico di ricerca di un elemento in quanto si sta dicendo "hey, andare a #tabs e trovare me tutto a[href=“#ddd”] in là" invece di dire "hey, mi trovare tutti questi ragazzi $('#tabs a[href=“#ddd”]') in tutto il codice che ho. "

Answer 7

Mentre, nella maggior parte dei casi, le prestazioni sono l'unica differenza, la differenza nell'approccio può anche influire sul risultato del codice, a seconda dei selettori che si stanno utilizzando.

Ad esempio, $("table").find("tr:even").addClass("even"); aggiungerà la classe "pari" a ogni altra riga in ogni singola tabella che viene restituita.Quindi, se la classe "anche" rende il testo nelle righe in grassetto e si dispone di due tavoli, ognuno con 3 file, si otterrebbe il seguente risultato:

---

questo è tavolo uno, riga 1

questa è una tabella, riga 2

questa è una tabella, riga 3

---

questo è tabella a due, riga 1

questo è tabella a due, riga 2

questo è tabella a due, riga 3

---

In entrambi i casi, il 1 ° e 3 ° fila di ogni tabella (cioè, le righe "pari". . . non farmi iniziare sul filtro even di JQuery, selezionando le righe dispari. . .) sono in grassetto.

D'altra parte, $("table tr:even").addClass("even"); aggiungerà la classe "pari" a tutte le altre righe dell'intero gruppo di righe di tutte le tabelle combinate.

---

questo è tabella one, fila 1

questo è tabella one, fila 2

questo è tabella a uno, riga 3

---

questo è tabella due, riga 1

questo è tabella a due, riga 2

questo è tabella a due, riga 3

---

In questa situazione, il 1 ° e 3 ° riga della seconda tabella sono effettivamente i 4 e 6 righe della intero gruppo di elementi <tr>, quindi sono considerati come "dispari". La seconda riga del secondo tavolo, tuttavia, è la quinta riga dell'intera collezione e, quindi, viene trattata come "pari" ed è in grassetto.