Toute façon de mélanger le contenu dans plusieurs éléments div

Question

Je suis relativement nouveau à Javascript et je me demandais s'il y a un moyen rapide de mélanger le contenu qui est contenu dans plusieurs étiquettes <div>. Par exemple

<div id='d1'> 
    <span>alpha</span> 
    <img src='alpha.jpg'> 
</div> 
<div id='d2'> 
    <span>beta</span> 
    <img src='beta.jpg'> 
</div> 
<div id='d3'> 
    <span>gamma</span> 
    <img src='gamma.jpg'> 
</div> 

<button onclick='shuffle_content();'>Shuffle</button> 

Après avoir cliqué sur le bouton, je voudrais que le contenu en d1, d2, d3 changer de place (par exemple d3 serait peut-être d'abord, puis d1, puis d2).

Un moyen rapide de déplacer les choses est de copier le premier élément div (d1), puis de le placer à la toute fin (après d3), puis de supprimer le d1 d'origine. Mais cela ne rend pas vraiment les choses aléatoires. Cela fait juste avancer les choses dans le cycle (ce qui pourrait être bien).

Toutes les suggestions seraient appréciées. Merci.

Answer 1

tu vas bien avec l'aide d'une bibliothèque javascript comme jQuery? Voici un exemple rapide de jQuery pour accomplir ce que vous recherchez. la seule modification de votre code HTML est l'ajout d'un élément conteneur comme suggéré:

<div id="shuffle"> 
    <div id='d1'>...</div> 
    <div id='d2'>...</div> 
    <div id='d3'>...</div> 
</div> 

et javascript:

function shuffle(e) {    // pass the divs 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 our set 
     replace.append(temp);  // add the selected div to our new set 
     e = e.not(temp); // remove our selected div from the main set 
     size--; 
    } 
    $('#shuffle').html(replace.html());  // update our container div with the 
              // new, randomized divs 
} 

shuffle($('#shuffle div')); 

Answer 2

J'envelopperais les divs dans un div externe, puis passerais son id à shuffle_content().

Dans ce cas, vous pouvez créer un nouveau div, cloning les nœuds div de l'encapsuleur dans un ordre aléatoire pour le remplir, puis replace le div wrapper avec le nouveau div.

Answer 3

Je vous suggère de randomiser le contenu, pas les Divs eux-mêmes. Vous pouvez accomplir ceci en mettant le contenu dans des pages html séparées - aucune information d'en-tête ou corps, juste le contenu.

Ensuite, utilisez une fonction de la charge de la page pour attribuer au hasard qui div obtient ce contenu et l'utiliser pour modifier le contenu du DIV:

<script type="text/javascript"> 
    function ajaxManager(){ 
     var args = ajaxManager.arguments; 

     if (document.getElementById) { 
      var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); 
     } 
     if (x){   
      switch (args[0]){ 
       case "load_page": 
        if (x) 
        { 
         x.onreadystatechange = function() 
         { 
          if (x.readyState == 4 && x.status == 200){ 
           el = document.getElementById(args[2]); 
           el.innerHTML = x.responseText; 
          } 
         } 
         x.open("GET", args[1], true); 
         x.send(null); 
        } 
        break; 

       case "random_content": 
        ajaxManager('load_page', args[1], args[2]); /* args[1] is the content page, args[2] is the id of the div you want to populate with it. */  
        break; 
      } //END SWITCH 
     } //END if(x) 
    } //END AjaxManager 

</script> 

Answer 4

j'utiliser le code côté serveur pour y parvenir. Je sais que ce n'est pas vraiment une réponse à votre question, mais est une implémentation alternative.

Cordialement,
Frank

Answer 5

Vous pouvez saisir le contenu de chaque div

c1 = document.getElementById('div1').innerHTML 
c2 = document.getElementById('div2').innerHTML 
c3 = document.getElementById('div3').innerHTML 

Il faut ensuite déterminer une nouvelle commande pour eux au hasard ..puis mettre chaque contenu dans la nouvelle destination

dire par exemple, le caractère aléatoire a donné:

c1_div = 'div2' 
c2_div = 'div1' 
c3_div = 'div3' 

alors vous venez:

document.getElementById(c1_div).innerHTML = c1 
document.getElementById(c2_div).innerHTML = c2 
document.getElementById(c3_div).innerHTML = c3 

Answer 6

Pour votre HTML, la réponse à votre question est :

function shuffle_content() { 
var divA = new Array(3); 
for(var i=0; i < 3; i++) { 
    divA[i] = document.getElementById('d'+(i+1)); 
    document.body.removeChild(divA[i]); 
} 
while (divA.length > 0) 
    document.body.appendChild(divA.splice(Math.floor(Math.random() * divA.length),1)[0]); 
} 

Pour y arriver, j'ai écrit ce qui suit, qui fonctionne mieux:

<html> 
<div id="cards"> 
<div id="card0">Card0</div><div id="card1">Card1</div> 
<div id="card2">Card2</div><div id="card3">Card3</div> 
<div id="card4">Card4</div><div id="card5">Card5</div> 
<div id="card6">Card6</div><div id="card7">Card7</div> 
<div id="card8">Card8</div><div id="card9">Card9</div> 
</div> 
<button id="shuffle">Shuffle</button> 
<script language="javascript"> 
<!-- 
document.getElementById('shuffle').onclick = function() { 
var divCards = document.getElementById('cards'); 
var divCardsArray = new Array(
    document.getElementById('card0'), 
    document.getElementById('card1'), 
    document.getElementById('card2'), 
    document.getElementById('card3'), 
    document.getElementById('card4'), 
    document.getElementById('card5'), 
    document.getElementById('card6'), 
    document.getElementById('card7'), 
    document.getElementById('card8'), 
    document.getElementById('card9') 
    ); 
return function() { 
    var mDivCardsArray=divCardsArray.slice(); 
    while (divCards.childNodes.length > 0) { 
     divCards.removeChild(divCards.firstChild); 
    } 
    while (mDivCardsArray.length > 0) { 
     var i = Math.floor(Math.random() * mDivCardsArray.length); 
     divCards.appendChild(mDivCardsArray[i]); 
     mDivCardsArray.splice(i,1); 
    } 
    return false; 
} 
}() 
//--> 
</script> 
</html> 

J'ai essayé de tasser cette dernière while à:

while (mDivCardsArray.length > 0) { 
     divCards.appendChild(
      mDivCardsArray.splice(
       Math.floor(Math.random() * mDivCardsArray.length) 
       ,1)[0] 
     ); 
    } 

mais cela est assez difficile à lire et sujettes à l'erreur.

En choisissant jQuery ou Prototype, vous pouvez suivre la même structure de base et obtenir le résultat que vous recherchez.

Personnellement, je pense qu'il semble encore mieux si vous ajoutez 2 plus divs à la pile cards, développez le divCardsArray, insérez le bloc de style suivant, et ajoutez ce code juste après la définition divCardsArray.

<html> 
... 
<style> 
html,body{height:100%;width:100%;text-align:center;font-family:sans-serif;} 
#cards,#cards div{padding:5px;margin:5px auto 5px auto;width:100px;} 
</style> 
... 
<div id="cardA">CardA</div><div id="cardB">CardB</div> 
... 
var colorCardsArray = new Array(
    '#f00', '#f80', '#ff0', '#8f0', '#0f0', '#0f8', 
    '#0ff', '#08f', '#00f', '#80f', '#f0f', '#f08'); 
for(var i=0;i<divCardsArray.length;i++) 
    divCardsArray[i].style.backgroundColor=colorCardsArray[i]; 
... 
</html> 

Answer 7

Une question récente a été juste fermée en tant que copie de ceci, mais je pense que j'ai une meilleure réponse que n'importe qui ici. Cette méthode est très directe.

Pour mélanger tous les enfants d'un élément parent, sélectionnez un enfant au hasard et ajoutez-le à nouveau au parent un à la fois. jusqu'à ce que tous les enfants aient été réinscrits.

En utilisant jQuery:

var parent = $("#shuffle"); 
var divs = parent.children(); 
while (divs.length) { 
    parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]); 
} 

Démo:http://jsfiddle.net/C6LPY/2

Sans jQuery il est similaire et tout aussi simple:

var parent = document.getElementById("shuffle"); 
var divs = parent.children; 
var frag = document.createDocumentFragment(); 
while (divs.length) { 
    frag.appendChild(divs[Math.floor(Math.random() * divs.length)]); 
} 
parent.appendChild(frag); 

Démo:http://jsfiddle.net/C6LPY/5/

---

Edit: est ici une pause vers le bas du code:

// Create a document fragment to hold the shuffled elements 
var frag = document.createDocumentFragment(); 

// Loop until every element is moved out of the parent and into the document fragment 
while (divs.length) { 

    // select one random child element and move it into the document fragment 
    frag.appendChild(divs[Math.floor(Math.random() * divs.length)]); 
} 

// appending the document fragment appends all the elements, in the shuffled order 
parent.appendChild(frag);