Transformez le tableau des éléments jQuery en un ensemble d’éléments jQuery encapsulés

Existe-t-il une manière élégante de transformer [$(div), $(span), $(li)] en $(div, span, li) ?

Ce dont j’ai besoin est un ensemble d’éléments jQuery-wrapped au lieu d’un tableau d’éléments jQuery. Je voudrais le faire avec le moins de lignes de code possible et avec un minimum de boucles (le cas échéant).

Edit: Pour ceux d’entre vous qui sont déroutés par cette question, ce code est copié et collé depuis Firebug en utilisant console.log sur un tableau d’éléments déjà sélectionnés .

La fonction map() de jQuery est parfaite pour remodeler les tableaux et / ou les collections jQuery.

Donc, étant donné un ensemble de tableaux comme ça:

 var arrayOfJQ_Objects = [$("div"), $("span"), $("li")]; 

Cette ligne de code est tout ce dont vous avez besoin ( Voir en action à jsFiddle ):

 $(arrayOfJQ_Objects).map (function () {return this.toArray(); } ); 

Résultat dans cette console afficher dans Firebug:

 jQuery(div, span, li) 

Référence, également, la fonction .toArray() de jQuery .

Si ce que vous voulez dire, c’est comment convertir:

 [$(a), $(b), $(c)] 

dans le résultat de:

 $(a, b, c) 

alors vous pouvez utiliser la fonction add pour append chaque object jQuery à un autre object jQuery:

 var x = $(); // empty jQuery object $.each([$(a), $(b), $(c)], function(i, o) {x = x.add(o)}); 

À ce stade, x contiendra un object jQuery combiné qui est la combinaison des objects jQuery a, b et c précédents du tableau.

Je n’ai pas trouvé le moyen de le faire sans la boucle each() . La fonction add() accepte un tableau d’éléments DOM comme argument, mais (au moins selon la documentation ), pas un tableau d’objects jQuery.


Ou, vous pourriez utiliser ceci qui serait probablement un peu plus efficace car il ne crée qu’un seul object jQuery à la fin:

 $([$(".a"), $(".b"), $(".c")].reduce(function(result, current) { return result.concat(current.get())}, [])); 

Vous pouvez utiliser la méthode add pour copier les éléments d’un object jQuery vers un autre. Cela copiera tous les éléments de chacun des objects jQuery de la source du tableau dans les items object jQuery:

 // Create an empty jQuery object var items = $([]); // Add the elements from each jQuery object to it $.each(source, function(){ items = items.add(this); }); 

(Avant la version 1.3.2, la méthode add ne items.add(this.get()); pas en charge l’ajout d’un object jQuery, vous devez donc utiliser items.add(this.get()); place)

Un peu plus concis que la réponse acceptée, on peut utiliser le $.fn.toArray comme argument passé à $.fn.map :

 var list = [$(''), $(''), $('')]; $(list).map($.fn.toArray); 

Ou peut-être (c’est vraiment inférieur, mais vous n’avez qu’un seul appel de fonction dans votre code):

 $.fn.map.call(list, $.fn.toArray); 

Ou simplement $( );

c’est $( [$("selector1"), $("selector2"), $("selector3"), ...] ); dire $( [$("selector1"), $("selector2"), $("selector3"), ...] );

Edit : Je pensais que jQuery supportait toutes les méthodes Array , mais non, alors voici une version de travail de ma solution initiale, même si c’est un peu bizarre puisque je m’en tiens aux mêmes méthodes:

 var set; // The array of jQuery objects, // but make sure it's an Array. var output = set.pop(); $.each(set, function (_, item) { return [].push.call(output, [].pop.call(item)); }); 

Ajouter un seul élément:

 var $previousElements = $(); $previousElements.add($element); 

convertir un tableau en un ensemble d’éléments jQuery:

 var myjQueryElementArray = [$element1, $element2, $elementN]; $(myjQueryElementArray ).map (function () {return this.toArray(); } ); 

append un tableau d’éléments aux éléments existants:

 var $previousElements = $(), myjQueryElementArray = [$element1, $element2, $elementN]; $previousElements.add($(myjQueryElementArray).map (function () {return this.toArray(); } )); 

Si Array.prototype.reduce() est pris en charge dans votre environnement.

 var jQueryCollection = [$("a"), $("div")] .reduce(function (masterCollection, collection) { return masterCollection.add(collection); }, $()); 

jsfiddle .

vous pourriez faire quelque chose comme ça:

 var $temp = $(); $.each([$("li"), $("li"), $("li")], function(){ $temp.push(this[0]); }) 

$ temp tous vos éléments dans un sélecteur jQuery

Mais je suis curieux de savoir ce qui vous amène à cette situation avec un tableau de différents éléments jQuery. Vous savez que vous pouvez sélectionner différents éléments en utilisant une virgule? comme $("li, ul > li:eq(0), div")

éditez comme Guffa l’a souligné, ceci ajoute seulement le premier élément de chaque section. .add() est un meilleur choix que .push() ici.

 $('li').each(function(){ $(this).doSomething(); 

})