jquery find versus sélection contextuelle

Question

J'ai le code html suivant

<div class="something">
    <p>Some text</p>
</div>
<div class="somethingElse">
    <p>some other text</p>
</div>

Je pense que les snippets jquery suivants sont identiques (auront le même résultat) :

$(".something").find("p").css("border", "1px solid red");

$("p", ".something").css("border", "1px solid red");

Ma question est de savoir si un extrait est meilleur que l'autre et s'il faut l'utiliser.

Answer 1

Les appels ne sont pas identiques.

Selon Brandon Aaron, qui a apparemment travaillé sur jQuery, et aussi selon les tests en direct aquí la méthode de recherche est toujours plus rapide. Voir les résultats dans la capture d'écran ci-dessous. Veuillez commenter si j'ai manqué quelque chose.

Avec une différence de vitesse de 10% ou plus, selon le navigateur, cela vaut vraiment la peine de l'utiliser.

Voici une explication plus détaillée sur le site de Brandon aquí .

Answer 2

Les deux appels sont identiques. Le dernier appel est traduit dans le premier. Si vous souhaitez omettre l'étape de traduction, utilisez le premier appel.

Answer 3

Je peux penser à un cas d'utilisation où l'utilisation de l'option context pourrait être préférable - dans le cas où le contexte est contenu dans une variable qui pourrait être nulle.

Par exemple :

// Only affect matching items that are descendants of '#parent'
do_something( $( '#parent' ) );
// Affect all matching items
do_something();

function do_something( $parent_element ){
  $( '.child', $parent_element ).each( function(){ } );
}

La deuxième fois do_something() est appelé, si nous avions utilisé $parent_element.find() il aurait échoué, alors que dans cet exemple, si $parent_element est indéfini ou vide, le contexte est nul, donc : le document entier.

Il s'agit certes d'un cas limite, mais il est apparu dans le cadre d'un projet sur lequel je travaillais, et j'ai donc pensé le mettre ici pour la postérité.

Answer 4

Find est meilleur, de 40% :

http://jsperf.com/jquery-find-vs-context-2/13

Notez la différence :

$myDiv = $("myDiv")
myDiv = "#myDiv"

lors du passage $myDiv avec l'élément jQuery comme contexte, il est environ 10% plus lent que $.find. en passant dans #myDiv avec le sélecteur jQuery comme contexte, il est 40% plus lent que $.find.

$.find > contexte.