Différence entre $ ('# tabs a') et $ ('# tabs'). Find ('a')

Question

J'ai structure suivante

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

Maintenant, je suis d'exploitation sur la balise d'ancrage par le code suivant et qui fonctionne bien.

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

Je suis à l'aide de pycharm qui ajoute un avertissement pour la ligne en disant "Préface avec sélecteur d'ID". Quand je clique dessus, pycharm modifications suivantes

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

Les deux fonctionnent très bien, mais je ne comprends pas la différence.

Quelle est la différence dans les deux ou plus précisément quelle est la différence entre $('#tabs a[href="#ddd"]') et $('#tabs').find('a[href="#ddd"]')?

Answer 1

$("#tabs a") évalue à partir de la droite vers la gauche - ce qui est le natif de la direction des deux Grésillement sélecteur moteur et querySelectorAll - c'est à dire d'abord qu'il trouve tout de l'ancrage des éléments de la page, puis se rétrécit vers le bas à celles prévues à l' #tabs.

$("#tabs").find("a") évaluant de manière plus intuitive - de gauche à droite, c'est à dire d'abord qu'il trouve #tabs, et ensuite seulement le point d'ancrage des éléments sous elle.

Clairement le dernier donnerait de meilleures performances, mais il ne serait perceptible cumulé; qui est, si vous exécutez des milliers de requêtes. Sinon, la différence est négligeable.

Answer 2

Comme l'a indiqué à "Accroître la Spécificité de Gauche à Droite":

Un peu de connaissance de jQuery sélecteur moteur est utile. Il fonctionne à partir de la dernière sélecteur en premier afin de, dans les anciens navigateurs, une requête telle que:

$("p#intro em");

charge à chaque em élément dans un tableau. Il travaille ensuite les parents de chaque nœud et rejette ceux où p#intro ne peut pas être trouvé. La requête seront particulièrement inefficace si vous avez des centaines de em tags la page.

Selon le document, la requête peut être optimisée par la récupération le meilleur qualifié sélecteur de première. Il peut alors être utilisé comme un départ point pour enfant sélecteurs, par exemple

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

Mais les cas de Test , dit - $("#tabs > a") serait plus rapide

Answer 3

Le second est BEAUCOUP plus rapide. La raison d'être de jQuery sélecteur de enginge Grésillement, qui traverse la sélection de droite à gauche, et non pas vice versa.

Cela signifie que le sélecteur

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

La première interroge le DOM document pour une balise, qui contient l' attribut href ensemble de #ddd. Ensuite, il filteres tous les d'eux, obtenir tous qui est un <a> balise. Enfin, elle parcourt l'arborescence du DOM pour chaque nœud, en essayant de trouver un parent #tabs.

Imaginez un site avec 1.000 étiquettes avec des href="#ddd", comment terriblement lent que serait.

ALORS.

L'autre variation pycharm suggérer, c'est d'abord de localiser un élément #tabs. C'est super-rapide, puisque jQuery pouvez utiliser le navigateur natif méthode getElementById(). Avoir ce nœud, il peut traverser vers le bas pour trouver toutes les balises qui sont de correspondance. En faisant cela, non all tags in the whole DOM-tree, doit être vérifiée. Seuls ceux qui sont réellement en #tabs.

Pour de plus amples informations, veuillez consulter cette page dans la documentation.

Answer 4

L'effet est le même: recherchez des ancres dont la valeur est #ddd tant que href et qui sont des descendants de #tabs . La différence réside dans le moyen d'y parvenir.

La première solution trouve les ancres, puis vérifie si elles sont des descendants de #tabs .

La deuxième solution trouve #tabs puis trouve les ancres. Ce qui devrait être plus rapide, bien sûr.

Answer 5

.find() est meilleur en termes de performances par rapport à votre premier sélecteur

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

, c’est pourquoi pycharm le change en sélecteur avec .find()

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

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