Перегруппируйте divs случайным образом с помощью Javascript или JQuery

Question

У меня есть сетка 3x3 с использованием div, которые после нажатия кнопки мне нужны divs для случайного переключения. Следующая ссылка иллюстрирует идею того, что мне нужно создать.

Мне не нужна помощь с HTML макета, ни CSS дизайн задания на-се, а в том, чтобы создать функцию onclick, используя родной Javascript или JQuery для того, чтобы «перетасовать» и «сортировать» кнопки для работы. Если возможно, желательно JQuery, так как мне более удобно его синтаксис.

Я благодарю заблаговременно за помощь и поддержку. Любые полезные ссылки для меня, чтобы сделать мое собственное исследование, получили высокую оценку.

Я не ищу других, чтобы сказать, сделайте мою работу для меня, хотя решения высоко ценятся, но, возможно, направляют меня в виде псевдокода.

Answer 1

Существует несколько различных алгоритмов, которые можно использовать для «перетасовки» списка элементов. Однако один из моих любимых методов следующий, потому что он очень краток.

Общие Перемешать Алгоритм:

1. Найти список элементов для перегруппировки.
2. Удалить случайный элемент из элементов переставить
3. Вставьте элемент в новый список
4. Повторите шаги 1-3 до тех пор, пока не останется больше пунктов остаются в исходном списке

Пример кода

Вот функция, которая должна сделать трюк:

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

Существует полная рабочая версия: https://jsfiddle.net/oruq1qou/

Если вы заинтересованы в поиске других методов решения этой проблемы, я бы рекомендовал прочитать некоторые различные алгоритмы перетасовки.