Conseils pour référencer les éléments DOM travaillant avec jQuery

Question

Besoin de conseils sur la manière de référencer des éléments avec jQuery (DOM / Traversing / Selectors). Parfois, il suffit juste de définir un identifiant sur l'élément souhaité et de le faire:

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

Mais parfois, cela ne peut pas être utilisé, par exemple lorsque vous travaillez avec une liste de n éléments, j'ai vu certaines personnes associer une classe à chaque élément de la liste comme:

<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>

Et faites cela avec jQuery:

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

Certains autres font la même chose, mais avec l'attribut rel, etc.

Certaines personnes le font de manière si générique que cela fait peur, si tel est le cas:

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

Si je veux attacher un événement à l'ancre:

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

Comme en supposant qu'il n'y aura qu'un seul lien à l'intérieur de cette DIV.

Ce que vous en pensez, cela dépend vraiment du scénario ou il existe quelques bonnes pratiques pour le faire.

Answer 1

Recherchez les constructions les plus rapides. ID est le plus rapide. Obtenez rapidement le plus petit contexte possible - vous pouvez même utiliser un identifiant sur une DIV, puis sélectionner à partir de là - évitez si possible la recherche complète dans le DOM.

Par exemple, il sera plus rapide de rechercher un élément avec une classe que juste une classe.

Certaines de ces choses ne sont pas intuitives. Regardez quelques exemples dans StackOverflow pour avoir une idée de ce qui fonctionne.

Par exemple:

<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>

puis faites la sélection: (édité par notes)

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

Ceci ne recherche que les liens dans ce contexte.

Modifier par notes:

Il existe certaines préférences pour la syntaxe de sélection, telles que:

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

Quelques recherches de ma part sont nécessaires car la documentation de jQuery est un peu ambiguë ici: " parent > Child Returns: Tableau Correspond à tous les éléments enfants spécifiés par " child " d’éléments spécifiés par "parent". " et " enfants (expr) Retours: jQuery Obtenez un ensemble d'éléments contenant tous les enfants immédiats uniques de chacun des éléments correspondants. "

La question qui doit être clarifiée dans MON esprit est de savoir si la première forme renvoie TOUS les enfants / petits-enfants ou uniquement les enfants immédiats, comme indiqué dans la seconde forme, est vraie. L'un d'eux est le "sélecteur". forme et l’autre sous "traverser", qui pour moi sont des tâches fonctionnelles similaires mais pas exactement la même chose.

Answer 2

Je dirais que cela dépend de la situation, mais comme Mark Schultheiss l'a dit, cela aide à comprendre comment jQuery exécute vos sélecteurs pour obtenir les éléments.

La sélection par className sans donner de contexte sera lente dans IE car elle ne prend pas en charge getElementsByClassName . Voir cet article http://ejohn.org/blog/getelementsbyclassname-speed-comparison/. Il est utile d’ajouter le nom de l’élément (par exemple, div.className ) ou de limiter la recherche à une portée plus petite, comme celle-ci - $ ('. Class', '#myDiv')

Idem avec les sélecteurs d’attributs. L'abus d'attribut rel est pire que l'abus d'attribut class car il n'y a pas de fonction de recherche par attributs native dans aucun navigateur.