Est-il possible d’utiliser plusieurs variables au lieu de sélecteurs dans jQuery

Je sais que c’est plus rapide de faire ce qui suit:

var $header = $("#header"); $header.css({color:"#ff0000"}); $header.find("a").addClass("foo"); 

Au lieu de:

 $("#header").css({color:"#ff0000"}); $("#header a").addClass("foo"); 

Parce que jQuery n’a pas besoin de retrouver les éléments dans le DOM car nous y avons une référence directe.

Disons que j’ai ceci:

 var $header_elements = $("#header li"); var $footer_elements = $("#footer li"); 

Et j’utilise les deux individuellement pour quelques manipulations jQuery. Mais alors, je dois faire quelque chose sur les deux. En utilisant le sélecteur, je ferais ceci:

 $("#header li, #footer li").css({color:"#ff0000"}); 

Mais alors, le DOM doit être analysé à nouveau pour trouver des éléments correspondants. Est-il possible d’utiliser mes variables précédemment déclarées au lieu d’un nouveau sélecteur? Quelque chose comme ce qui suit (qui ne fonctionne pas , je sais, c’est pour donner une idée de ce que je cherche):

 $($header_elements + $footer_elements).css({color:"#ff0000"}); 

Je pense que le sélecteur retourne une sorte de tableau ou d’object. Ce que je cherche, c’est un moyen de les fusionner. Quelqu’un sait si c’est possible et comment le faire?

Merci de votre aide!

Utilisez simplement la méthode add :

 $header_elements.add($footer_elements).css({color:'#ff0000'}); 

Étant donné un object jQuery qui représente un ensemble d’éléments DOM, la méthode .add () construit un nouvel object jQuery à partir de l’union de ces éléments et ceux transmis dans la méthode. L’argument de .add () peut être à peu près tout ce que $ () accepte, y compris une expression de sélecteur jQuery, des références à des éléments DOM ou un extrait HTML.

J’ai trouvé les solutions quelques minutes après avoir posté ceci. Pour ceux qui se demandent, la voici:

 $.merge($header_elements, $footer_elements).css({color:"#ff0000"}); 

Est-ce plus rapide? Je ne sais pas encore, je vais devoir faire des tests pour le savoir.

MODIFIER:

Je l’ai testé avec JS Fiddle ici: http://jsfiddle.net/bgLfz/1/

J’ai testé en utilisant le sélecteur à chaque fois, variable pour les deux sélecteurs, les variables avec $ .merge () et en utilisant .add (). Chaque test a été exécuté 1000 fois.

Les résultats de mon côté sont les suivants (du plus rapide au plus lent):

  1. En utilisant $ .merge () (moyenne de 7ms)
  2. Utiliser les deux variables les unes après les autres (moyenne de 10 ms mais le code doit être dupliqué)
  3. Utiliser .add () (moyenne de 16ms)
  4. Utiliser des sélecteurs à chaque fois (moyenne de 295ms)

Vous pouvez utiliser la méthode d’ add ou de merge :
Ajouter

 $header_elements.add($footer_elements).css({color:'#f00'}); 

fusionner

 $.merge($header_elements, $footer_elements).css({color:"#f00"}); 

Les deux fonctionnent, mais l’ ajout est plus performant . entrer la description de l'image ici Source: http://jsperf.com/add-vs-merge

Crédit: J’ai voté pour @GenericTypeTea et @Gabriel answers, fait un résumé des deux, les a comparés et voici le résultat.

Passer un tableau de références:

 $([$header_elements, $footer_elements]).css({color:"#ff0000"}); 

Peu importe la performance, que vous fassiez quelque chose (même si cela a fonctionné):

 $($header_elements + $footer_elements).css({color:"#ff0000"}); 

ou faites-les séparément:

 $($header_elements).css({color:"#ff0000"}); $($footer_elements).css({color:"#ff0000"}); 

comme jquery parcourra en interne les arguments fournis en utilisant each() .

Si le principe est plus inspiré du DRY que de la performance, vous pouvez créer une fonction:

 function makeThemRed( el ) {el.css({color:"#ff0000"})} 

et alors

 makeThemRed($header_elements); makeThemRed($footer_elements); 

ou même:

 function makeThemRed() { var l=arguments.length, o=0; while (o 

et alors

  makeThemRed($header_elements, $footer_elements); //any number of parameters 

L’utilisation de ‘merge’ se limite à deux sélecteurs, et l’utilisation de ‘add’ sera tellement désordonnée si elle est supérieure à deux, donc si elle est supérieure à deux, vous devriez utiliser ‘each’ comme ceci:

 $([selector1, selector2, selector3, .....etc]).each(function(){ // your code here }); 

Vous pouvez toujours définir tous les éléments sur une seule variable:

 var $lis = $('#header li, #footer li'); $($lis).css({color:"#ff0000"}); 

Utilisez les littéraux de modèle ES6 pour plusieurs variables en tant que sélecteurs:

 $(`${$header_elements}, ${$footer_elements}`).css('color','#ff0000');