Transformez un tableau d'éléments jQuery en un ensemble d'éléments enveloppés par jQuery.

Question

Y a-t-il un moyen élégant de transformer [$(div), $(span), $(li)] en $(div, span, li) ?

Ce dont j'ai besoin, c'est d'un ensemble d'éléments enveloppés par jQuery au lieu d'un tableau d'éléments jQuery. Je voudrais faire cela avec le moins de lignes de code possible, et avec un minimum de boucles (voire aucune).

Edit : Pour ceux d'entre vous qui sont déroutés par cette question, ce code est copié et collé à partir de firebug utilisant console.log sur un tableau d'éléments qui ont déjà sélectionné .

Answer 1

La méthode de jQuery map() fonction est parfait pour remodeler les tableaux et/ou les collections jQuery.

Donc, donné un ensemble de tableaux comme ceci :

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

Cette seule ligne de code est tout ce dont vous avez besoin ( Voyez-le en action à jsFiddle ):

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

Le résultat est cet affichage de la console dans Firebug :

jQuery(div, span, li)

Référence, également, La méthode de jQuery .toArray() fonction .

Answer 2

Si ce que vous voulez vraiment dire est comment convertir :

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

dans le résultat de :

$(a, b, c)

vous pouvez alors utiliser la fonction add pour ajouter chaque objet jQuery à un autre objet jQuery :

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

À ce stade, x contient un objet jQuery combiné qui est la combinaison des objets jQuery a, b et c précédents dans le tableau.

Je n'ai pas pu trouver de moyen de le faire sans la each() boucle. Le site add() accepte un tableau d'éléments DOM en tant qu'argument, mais (du moins d'après la fonction la documentation ), et non un tableau d'objets jQuery.

---

Vous pouvez également convertir chaque objet jQuery en un élément DOM, ce qui serait probablement un peu plus efficace car cela ne crée qu'un seul nouvel objet jQuery à la fin :

$([$(".a"), $(".b"), $(".c")].map(function(o) { return o.get() }));

Answer 3

Vous pouvez utiliser le add pour copier les éléments d'un objet jQuery dans un autre. Cette méthode copiera tous les éléments de chacun des objets jQuery dans le tableau. source dans l'objet jQuery items :

// 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 fonction add ne prend pas en charge l'ajout d'un objet jQuery, vous devez donc utiliser la méthode suivante items.add(this.get()); à la place).

Answer 4

Pour ajouter un seul élément :

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

pour convertir un tableau en un ensemble d'éléments jQuery :

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

pour ajouter un tableau d'éléments aux éléments existants :

var $previousElements = $(),
     myjQueryElementArray = [$element1, $element2, $elementN];

$previousElements.add($(myjQueryElementArray).map (function () {return this.toArray(); } ));

Answer 5

Modifier : Je pensais que jQuery supportait tous les Array mais non, voici donc une version fonctionnelle de ma solution initiale, bien qu'elle soit 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));
});