Fusionner des objets jQuery

Question

Est-il possible de fusionner plusieurs objets DOM jQuery dans un tableau et d'appeler des méthodes jQuery sur tous ces objets ?

F.ex :

<button>one</button>
<h3>two</h3>

<script>

var btn = $('button');
var h3 = $('h3');

$([btn,h3]).hide();

</script>

Cela ne fonctionne pas. Je sais que je peux utiliser le sélecteur 'button,h3' ici, mais dans certains cas, j'ai déjà plusieurs éléments DOM jQuery et je dois les fusionner pour pouvoir appeler les prototypes jQuery sur tous ces éléments.

quelque chose comme :

$.merge([btn,h3]).hide();

fonctionnerait. Vous avez des idées ?

UPDATE :

Je l'ai résolu. Vous pouvez le faire comme ceci :

$.fn.add.call(btn,h3);

Je vais accepter le add() suggestion comme pour m'indiquer la bonne direction.

Answer 1

Vous pourriez utiliser le ajouter méthode.

Answer 2

.add() fait exactement ce que vous cherchez.

h3.add(btn).hide();

Si vous vouliez le rendre un peu plus pratique pour vous, avec une fonction de "fusion" comme dans votre question, cela pourrait être ajouté facilement :

$.merge = function(objs) {
    var ret = objs.shift();
    while (objs.length) {
        ret.add(objs.shift());
    }
    return ret;
};

$.merge([h3, btn]).hide()

Answer 3

$.map peut aplatir des tableaux :

function merge(array_of_jquery_objects) {
    return $($.map(array_of_jquery_objects, function(el) {
        return el.get();
    }));
}

Answer 4

$(btn).add(h3).hide();

Je ne suis pas sûr que cela fonctionne, documentation pour l'ajout ne mentionne pas d'avoir l'objet jQuery comme paramètre mais seulement une liste d'éléments, donc si cela ne fonctionne pas, ceci devrait le faire :

$(btn).add(h3.get()).hide();

Answer 5

Obtenez des objets jQuery :

var x = $('script'),
    y = $('b'),
    z = $('body');

Créer un nouvel objet jQuery, contenant tous les autres objets :

$( $.map([x,y,z], a => [...a]) )

Démonstration : (ouvrez la console de votre navigateur)

var x = $('script'),
    y = $('b'),
    z = $('body');

// step 1
// put all the jQuery objects in an Array to prepare for step 2
var step1 = [x,y,z];
console.log(step1)

// using jQuery.map and a callback, extract  the actual selector from the iterable 
// array item and return it, so the result would be a simple array of DOM nodes
// http://jqapi.com/#p=jQuery.map
var step2 = $.map(step1, a => [...$.makeArray(a)])
console.log(step2);

// convert the javascript Array into jQuery Object (which contains all the nodes)
var step3 = $( step2 )
console.log(step3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<b></b>