Jeder Weg, um shuffle-Inhalte in mehreren div-Elementen

Ich bin relativ neu in Javascript und wollte Fragen ob es einen schnellen Weg, um den shuffle-Inhalte in mehreren <div> - tags. Zum Beispiel

<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>

Nach einem Klick auf den button möchte ich den Inhalt in d1, d2, d3 zu tauschen (zum Beispiel, vielleicht d3 würde der erste sein, dann d1, dann d2).

Einen schnellen Weg, um Dinge bewegen zu kopieren, das erste div-element (d1), dann legen Sie es am Ende (nach d3), und löschen Sie dann den ursprünglichen d1. Aber das hat auch nicht wirklich zufällige Dinge. Es macht einfach Dinge, die gehen in den Zyklus (das wäre ok).

Irgendwelche Vorschläge würden geschätzt. Danke.

InformationsquelleAutor Chris | 2008-11-24

sind Sie ok mit der Verwendung einer javascript-Bibliothek wie jQuery? hier ist eine schnelle jQuery Beispiel zu erreichen, was Sie wollen. die einzige änderung zu HTML ist die Zugabe von einem container-element vorgeschlagen:

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

und 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') );

Danke Owen, ich denke, das ist die beste Antwort, die ich bisher gesehen habe.
Leider, da mein Ruf ist unter 15, ich kann nicht, Stimmen Sie diesem bis. Aber wenn ich könnte, würde ich.

InformationsquelleAutor Owen

14

Einer letzten Frage wurde gerade geschlossen als Duplikat von diesem, aber ich glaube, ich habe eine bessere Antwort als jeder hier. Diese Methode ist sehr direkt. Es gibt keine mucking mit dem kopieren von HTML, so dass änderungen an der DOM -, Stil -, event-Handler, etc.

Shuffle alle Kinder von einigen Eltern-element, wählen Sie eine zufällige Kind und hängen Sie es zurück zu den Eltern ein zu einer Zeit, bis alle Kinder wurden neu angefügt.

Verwendung von jQuery:
```
var parent = $("#shuffle");
var divs = parent.children();
while (divs.length) {
    parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
```
Demo: http://jsfiddle.net/C6LPY/2

Ohne jQuery es ist ähnlich und genauso einfach:
```
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);
```
Demo: http://jsfiddle.net/C6LPY/5/

Edit: Hier ist eine Aufschlüsselung des Codes:
```
//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);
```
- Gute Antwort. Wenn Stackoverflow erlaubt Fragen zu mehreren "akzeptierte" Antworten, würde ich auch die Bezeichnung "akzeptiert".
- dies ist auch anwendbar für das mischen der Liste?
- Eine Frage zu "divs.splice(Math.floor(Math.random() * divs.Länge), 1)[0]" was ist die Verwendung von [0] ?
- gibt ein array zurück, in diesem Fall, ein einzelnes element. [0] bekommt Sie das erste element in diesem array.
- ja, Sie können diese nutzen, um shuffle eine Liste der jede Art von element.
- Aber splice löscht den Inhalt richtig? und gibt die entfernten Elemente?
- Ja, das ist der Punkt. Beachten Sie die while loop... wir-Schleife, bis das Array leer ist und alle Elemente wurden neu eingefügt.
- Ich aktualisiert meine Antwort mit Aufschlüsselung der was genau passiert im inneren des while Schleife. Ich hoffe, das hilft zu klären es für Sie.
- Wann wird der loop eigentlich aufhören? sind nicht die Schleife beenden würde, da gäbe es immer einen Eintrag oder ein Element im array divs?
- Nein, denken Sie daran .splice() entfernt das Element aus dem array. Da in jeder iteration der while Schleife entfernen wir genau ein Element aus dem array, die Schleife wird beendet, sobald wir Sie bearbeitet haben, ist jedes element. divs ist ein Array, dessen Elemente Referenz dom-Knoten. Wir erstellt das array durch kopieren der Elemente aus dem parent-element children Sammlung. Entfernen Sie ein element aus dem array nicht ändern, der DOM. Ie aufrufen divs.splice(n, 1) entfernt ein element aus dem Array, aber das element existiert noch in die Seite, als ein Kind von parent.
InformationsquelleAutor gilly3

Können Sie greifen die Inhalte der einzelnen div -

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

Bestimmen dann eine neue Bestellung für Sie nach dem Zufallsprinzip .. und setzen Sie dann die einzelnen Inhalte in das neue Ziel

sagen zum Beispiel, die Zufälligkeit gab:

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

dann einfach nur:

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

Dies ist auch eine gute Antwort. Dank Der Hasen.

InformationsquelleAutor hasen

1

Ausbau der nette Antwort durch @gilly3, mit jQuery kann man eigentlich vermeiden, anfügen zufällig ausgewählten Elemente divs in einer Schleife, die durch zufällig Sortierening divstatt und appending Sie alle auf einmal:
```
$(function() {
  var parent = $("#shuffle");
  var divs = parent.children();
  divs.sort(function(a, b) {
    return 0.5 - Math.random();
  });
  parent.append(divs);
});
```
Demo: http://jsfiddle.net/ey70Lxhk/

Beachten Sie jedoch, dass diese Technik nicht präzise in Bezug auf Zufälligkeit, und setzt auf sort die nicht Linear mit der Anzahl der Elemente.

InformationsquelleAutor Riccardo Porreca
0

Ich würde mit server-side-code, dies zu erreichen. Ich weiß, das ist nicht wirklich eine Antwort auf deine Frage, aber es ist eine alternative Implementierung.

Beste Grüße,
Frank

InformationsquelleAutor Frank V
0

Ich würde wrap die divs in ein äußeres div, dann übergeben Sie dessen id auf shuffle_content().

Dort konnten Sie erstellen ein neues div, Klonen der wrapper-div-Knoten in einer zufälligen Reihenfolge zu füllen, dann ersetzen der wrapper-div mit den neuen div.

InformationsquelleAutor Kev

Für Ihre HTML, die kurze Antwort auf Ihre Frage ist:

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]);
}

Dorthin schrieb ich Folgendes, was ich denke funktioniert besser:

<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>

Ich versuchte, mich zu packen nach unten, die Letzte while-Anweisung:

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

aber das ist ziemlich schwer zu Lesen und fehleranfällig.

Geht mit jQuery oder Prototype könnten Sie Folgen der gleichen grundlegenden Struktur und das Ergebnis bekommen, das Sie suchen.

Ich persönlich denke, es sieht sogar noch besser, wenn Sie hinzufügen, 2 weitere divs zu den cards stack, erweitern Sie die divCardsArray legen Sie die folgenden style-block, und fügen Sie diesen code direkt nach der divCardsArray definition.

<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>

InformationsquelleAutor dlamblin

-1

Ich würde dir empfehlen, mischen Sie die Inhalte, nicht die eigentlichen Divs selbst. Sie können dies erreichen, indem Sie die Inhalte in separaten html-Seiten - keine header-Informationen oder Körper, nur der Inhalt.

Dann eine Funktion die beim laden der Seite zufällig weisen die div bekommt, was Inhalt und verwenden Sie dieses zum ändern des DIV-Inhalts:

<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>

Dies beantwortet nicht die Frage, einfach erklärt, einen anderen Weg, um den Inhalt zu verschieben.
Ich bot eine schnelle Methode, um den Inhalt zu verschieben, um die sich die OP ' s ursprüngliche Absicht. Was hast du gelesen, die Frage zu stellen?

InformationsquelleAutor Rob Allen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.