Suggerimenti per fare riferimento a DOM Elements che funzionano con jQuery

Question

Hai bisogno di qualche consiglio su come fare riferimento a elementi con jQuery (DOM / Traversing / Selectors). A volte è sufficiente per impostare un ID sull'elemento desiderato e fare questo:

$('#elementID').hide();

Ma a volte non può essere usato, ad esempio quando si lavora con l'elenco di n elementi, ho visto alcune persone allegare una classe a ciascun elemento dell'elenco come:

<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>

E poi fallo con jQuery:

$('.selectMe').hide();

Alcuni altri fanno lo stesso ma con l'attributo rel e così via ..

Alcune altre persone lo fanno in modo così generico che fa paura, se questo è lo scenario:

<div id="MyID">
<span>Some Text Here</span><a href="http://jquery.com/">jQuery1</a>
</div>

Se voglio allegare un evento all'ancora:

$('#MyID a').show();

Come supporre che ci sia un solo link all'interno di quel DIV.

Ciò che voi ragazzi pensate dipenda davvero totalmente dallo scenario o ci sono alcune buone pratiche per farlo.

Answer 1

Cerca i costrutti più veloci. ID è il più veloce. Ottieni rapidamente il contesto più piccolo - puoi persino usare un ID su un DIV, quindi selezionare da lì - evita la ricerca DOM completa quando possibile.

Ad esempio, sarà più veloce cercare un elemento con una classe piuttosto che solo una classe.

Alcuni di questi NON sono intuitivi. Guarda alcuni degli esempi in StackOverflow per avere un'idea di ciò che funziona.

Ad esempio:

<div id='mydiv'>
<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
</div>

quindi seleziona: (Modificato per note)

$('#mydiv').children('a.selectMe').hide();

Questo quindi cerca solo i collegamenti in quel contesto.

Modifica per note:

Esistono alcune preferenze per la sintassi di selezione come:

 $('#mydiv').children('a.selectMe').hide();
 $('#mydiv > a.selectMe').hide();

Alcune ricerche da parte mia sono necessarie in quanto la documentazione per jQuery è un po 'ambigua qui: & Quot; genitore > Restituzioni figlio: matrice Corrisponde a tutti gli elementi figlio specificati da " child " degli elementi specificati da "parent". & Quot; e & Quot; children (expr) Restituisce: jQuery Ottieni un set di elementi contenente tutti i figli immediati unici di ciascuno dei set di elementi corrispondenti. & Quot;

La domanda che deve essere chiarita nella MIA mente è se la prima forma restituisce TUTTI i figli / nipoti o solo i figli immediati come indica la seconda forma è vera. Uno di questi è il "selettore" la forma e l'altra sotto "attraversamento", che per me sono compiti funzionali simili ma non esattamente la stessa cosa.

Answer 2

Direi che dipende dalla situazione, ma come ha detto Mark Schultheiss, aiuta a capire come jQuery esegue i selettori per ottenere gli elementi.

La selezione per className senza fornire alcun contesto sarà lenta in IE poiché non supporta getElementsByClassName . Vedi questo articolo http://ejohn.org/blog/getelementsbyclassname-speed-comparison/. Aiuta a anteporre al nome dell'elemento (come div.className ) o limitare la ricerca a un ambito più piccolo come questo - $ ('. Class', '#myDiv')

Lo stesso vale per i selettori di attributi. L'abuso di attributi rel è peggiore dell'abuso di attributi class poiché non esiste una funzione di ricerca per attributi nativa in nessun browser.