Mélanger tous les DIVS avec la même classe

Ce dont j'ai besoin, c'est: État original:

<div class="shuffledv"> <div id="1"></div> <div id="2"></div> <div id="3"></div> </div> <div class="shuffledv"> <div id="4"></div> <div id="5"></div> <div id="6"></div> </div>

Après Shuffle:

 <div class="shuffledv"> <div id="2"></div> <div id="3"></div> <div id="1"></div> </div> <div class="shuffledv"> <div id="5"></div> <div id="4"></div> <div id="6"></div> </div>

Les Divs dans le premier div restent là mais se mélangent, et il en va de même pour la deuxième div avec la même classe. Pour mélanger les divs à l'intérieur d'un div particulier, j'utilise quelque chose comme ceci:

 function shuffle(e) { // pass divs inside #parent to the function var replace = $('<div>'); var size = e.size(); while (size >= 1) { var rand = Math.floor(Math.random() * size); var temp = e.get(rand); // grab a random div from #parent replace.append(temp); // add the selected div to new container e = e.not(temp); // remove our selected div from #parent size--; } $('#parent').html(replace.html()); // add shuffled divs to #parent }

Appelé mentir ceci: shuffle('#parent .divclass') Où toutes les Divs avec classe divclass sont à l'intérieur #parent je pense qu'il devrait commencer quelque chose comme

 function shuffle() { $(".shuffledv").each(function() {

Et puis faites une certaine forme de la fonction d'origine, mais je me suis complètement perdu à ce stade. Je n'ai aucune idée de la façon d'aller de l'avant. Veuillez me faire savoir si vous avez besoin de plus d'informations.

Jetez un oeil à ce jsfiddle . Essentiellement, ce que nous faisons est pour chacun des contenus shuffledv divs, nous trouvons tous les divs enfants et les stockons dans une liste, puis nous les supprimons du DOM, par exemple:

 $(".shuffledv").each(function(){ var divs = $(this).find('div'); for(var i = 0; i < divs.length; i++) $(divs[i]).remove();

Ensuite, j'ai saisi l'algorithme de mélange de Fisher-Yates d' ici pour randomiser la liste de nos divs, et enfin nous les ajoutons au conteneur parent, comme ceci:

 for(var i = 0; i < divs.length; i++) $(divs[i]).appendTo(this);

J'espère que cela t'aides!

Il a donné une première étape:

 (function () { "use strict"; // Cycle over each .shuffledv HTMLElement $(".shuffledv").each(function () { // Remove all divs within, store in $d var $d = $(this).find("div").remove(); // Sort $d randomnly $d.sort(function () { return Math.floor(Math.random() * $d.length); }); // Append divs within $d to .shuffledv again $d.appendTo(this); }); }());

Demo: http://jsfiddle.net/uYyAH/2/