Reorganisieren Sie Divs nach dem Zufallsprinzip mit Javascript oder Jquery

Question

Ich habe ein 3x3 Grid-Layout mit divs, die beim Klicken auf eine Schaltfläche ich brauche die divs nach dem Zufallsprinzip neu zu ordnen. Der folgende Link veranschaulicht eine Idee von dem, was ich erstellen muss.

Ich brauche keine Hilfe mit dem HTML-Layout noch CSS Design der Zuordnung per se, sondern vielmehr, wie die onclick Funktion mit nativen Javascript oder jQuery, um für die „Shuffle“ zu schaffen, und "Sortieren" Tasten zum Arbeiten. Wenn möglich, vorzugsweise Jquery, da ich mit seiner Syntax wohler bin.

Ich danke allen im Voraus für Hilfe und Unterstützung. Nützliche Links für meine eigene Recherche werden sehr geschätzt.

Ich bin nicht auf der Suche nach anderen zu sagen, meine Arbeit für mich zu tun, obwohl Lösungen sehr geschätzt werden, aber vielleicht führen mich in einer Pseudo-Code Art und Weise.

Answer 1

Es gibt eine Reihe verschiedener Algorithmen, mit denen Sie eine Liste von Elementen "mischen" können. Eine meiner Lieblingsmethoden ist jedoch die folgende, weil sie sehr prägnant ist.

Allgemeine Shuffle Algorithmus:

1. Finden Sie eine Liste der Elemente neu zu ordnen.
2. ein zufälliges Element aus dem Artikel entfernen
3. Legen Sie das Element in eine neue Liste
4. Wiederholen Sie die Schritte 1-3 neu zu ordnen, bis es keine weiteren Einträge in der ursprünglichen Liste

Code-Beispiel links sind

Hier ist eine Funktion, die den Trick tun sollten:

$container = $("#container"); 
$divList = $("div"); 

$("#shuffle").on("click", function(){ 
    //copy and remove all divs 
    $divCopy = $divList.clone(true); 
    $("div").remove(); 

    while($divCopy.length > 0){ 
    //chose random index of div array 
    var randomIndex = Math.floor(Math.random() * $divList.length); 

    $container.append($divCopy.splice(randomIndex, 1)); 
    } 
}); 

Es gibt eine voll funktionsfähige Version unter https://jsfiddle.net/oruq1qou/

Wenn Sie nach anderen Methoden zur Lösung dieses Problems suchen, würde ich empfehlen, einige der verschiedenen Arten von Shuffle-Algorithmen zu lesen.