javascript - 如何在 jQuery 中对随机 div 顺序进行排序？

Question

在页面加载时，我使用以下代码随机化子 div 的顺序:

function reorder() {
   var grp = $("#team-posts").children();
   var cnt = grp.length;

   var temp, x;
   for (var i = 0; i < cnt; i++) {
       temp = grp[i];
       x = Math.floor(Math.random() * cnt);
       grp[i] = grp[x];
       grp[x] = temp;
   }
   $(grp).remove();
   $("#team-posts").append($(grp));
}

我似乎不知道如何让帖子恢复原来的顺序。这是我当前代码的演示 http://jsfiddle.net/JsJs2/

Answer 1

在调用 reorder() 函数之前保留原始副本，如下所示，并在以后使用它进行重新排序。

var orig = $("#team-posts").children();

$("#undo").click(function() {
    orderPosts();
});

function orderPosts() {
   $("#team-posts").html( orig )  ;
}

<强> Working demo

完整代码

var orig = $("#team-posts").children(); ///caching original

reorder();

$("#undo").click(function(e) {
    e.preventDefault();
    orderPosts();
});

function reorder() {
    var grp = $("#team-posts").children();
    var cnt = grp.length;

    var temp, x;
    for (var i = 0; i < cnt; i++) {
        temp = grp[i];
        x = Math.floor(Math.random() * cnt);
        grp[i] = grp[x];
        grp[x] = temp;
    }
    $(grp).remove();
    $("#team-posts").append($(grp));
}

function orderPosts() {
    // set original order
    $("#team-posts").html(orig);
}