quelle est la différence entre $ ("# context .searched") et $ (". Searching", $ ("# context"))?

Question

J'avais cette question en tête depuis longtemps. Théoriquement, la fonction core jQuery accepte une valeur optionnelle qui peut être un élément DOM - $(".searched",$("#context")[0]) - ou un objet jQuery - $(".searched",$("#context")). J'ai découvert cette dernière question en lisant cela bien article.

Mais je ne peux vraiment pas voir la différence entre utiliser un contexte et passer une expression css plus complexe. S'il n'y a pas de différence dans la façon dont cela fonctionne, y a-t-il une différence de performance?

Merci

Answer 1

La différence majeure serait que $(".searched", context); peut également prendre une variable comme contexte. Il fait effectivement $(context).find('.searched'); sous le capot, et je pense que la deuxième version est plus lisible de toute façon, donc je l'utilise habituellement.

L'utilisation de cette situation serait quelque chose comme ceci:

$.fn.highlightSearch = function() { 
    return this.each(function() { 
    $('.searched', this).addClass('highlighted'); 
    // the commented line performs the same thing: 
    // $(this).find('.searched').addClass('highlighted'); 
    }); 
}; 

$('#context').highlightSearch(); 
$('.somethingElse').highlightSearch(); 

Notez que dans ce cas, vous ne pouvez pas ajouter simplement le nouveau sélecteur sur la fin de l'original.

Si vous n'avez aucune autre raison de conserver une copie de $('#context'), l'utilisation de $('#context .searched') sera plus rapide et plus simple. Toutefois, si vous avez déjà enregistré $('#context') dans une variable, il est préférable d'utiliser .find(select) ou le formulaire $(selector, context) pour rechercher vos éléments contenus.

Answer 2

Il est converti en un élément DOM (en Sizzle, la partie de contexte) pour rechercher dans l'un de vos cas, ultimately doing un .find() sous les couvertures.

Si vous êtes préoccupé par la performance (pourquoi pas être aussi rapide que possible?), Vous devez utiliser ceci:

$("#context .searched") 

Cette version gets converted back into a jQuery object:

$("#context")[0] 

Il est donc un peu plus lent sur le côté jquery, car il doit être enveloppé dans un objet jquery avant l'appel .find(), que la différence de performance est très minime, mais c'est la seule différence donc je le note :)

Answer 3

Lisibilité: un sélecteur CSS comme $("#context .searched") est beaucoup plus lisible que l'autre.