Javascript 如何从shuffle函数中获取输出并在DOM元素中移动？

所以我有这个HTML：

 <ul class="deck">
        <li class="card">
            <i class="fa fa-diamond"></i>
        </li>
        .....(16 total list items here)
    </ul>

这个功能会将卡片（这是一个卡片记忆游戏）洗牌，但它不会在卡片周围移动…我需要以某种方式移动卡片，我不知道怎么做。我应该从jQuery动态创建卡片（列表项），而不是使用HTML吗？我真的很困惑

jQuery解决方案：

// Add a shuffle() function to extend $() (jQuery) elements.
$.fn.shuffle = function() {
    // Fetch all elements in selection,
    var allElems = this.get(),
        getRandom = function(max) { //temporary function for in-house use
            // return a random value below a max value
            return Math.floor(Math.random() * max);
        },
        //shuffle elements...
        shuffled = $.map(allElems, function(){
            //loop through each element in selection (array)

            // calculate a new random value, which is smaller than the selection size
            var random = getRandom(allElems.length),
            // clone random element in selection (array). this will be the new element at this current point in the array
                randEl = $(allElems[random]).clone(true)[0];
            // remove random element from it's original point in the array
            allElems.splice(random, 1);
            // return this random element, to be positioned at this point in the array. $.map will do this work for us
            return randEl;
       });
    //now we loop through our selection and individually update its order to match our shuffled version
    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });
    // return references to our new shuffled selection
    return $(shuffled);

};

用法：

var shuffled_selection = $('.deck .card').shuffle();
// select all .card elements under parent elements with class .deck
// and then shuffle the dom (directly). shuffled_selection = final result

来源：

---

一个工作示例：

您需要将排序后的数组附加到dom中。当前所做的只是对碰巧包含元素的数组进行排序，但排序后的数组不会自动更改dom

这里有一个非常简单的洗牌方法

var$deck=$（'.deck'），
$cards=$deck.children（）；
$（“按钮”）。单击（函数（）{
//对元素进行排序
$cards.sort（函数（）{return Math.random（）-.5；}）；
//使用新排序更新dom
$deck.append（$cards）；
})

1
2
3
4
5
6
7
8
9
10

Shuffle

我收到一个错误，说“UncaughtTypeError:无法读取未定义的”属性“defaultView”。还有，我该如何使用这个呢？它自己洗牌吗？这太离谱了。函数在哪个部分运行？或者我应该运行它吗？当这个函数运行时，它将自动调整DOM，并以新的无序配置返回元素。我将记录上面的代码以详细解释-您的错误可能是因为您的jQuery是另一个版本，或者可能是在jQuery加载之前运行的…我修复了错误，这是因为我在文件开头留下了一些奇怪的代码行。谢谢：那也可以；-）没问题！天哪，非常感谢！这正是我要找的！刚刚做的，我是stackoverflow的新手，所以请原谅我

var shuffled_selection = $('.deck .card').shuffle();
// select all .card elements under parent elements with class .deck
// and then shuffle the dom (directly). shuffled_selection = final result