如何在 jQuery 中对随机 div 顺序进行排序？答案

【问题标题】：How to sort a random div order in jQuery?如何在 jQuery 中对随机 div 顺序进行排序？
【发布时间】：2012-07-03 00:27:48
【问题描述】：

在页面加载时，我使用此代码随机化子 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/

【问题讨论】：

您可以为您的函数克隆原始组并将原始组移动到隐藏元素。

标签： javascript jquery sorting random

【解决方案1】：

只要给每个item一个对应顺序的class，然后获取每个div的class名，保存到一个变量中

$("#team-posts div").each(function() {
    var parseIntedClassname = parseInt($(this).attr("class");
    arrayName[parseIntedClassname] = $("#team-posts div." + parseIntedClassname).html()
});

您可以通过将它们的 html 按顺序保存到数组中来重新排序它们

$("#team-posts").html();
for(var i=0;i<arrayName.length;i++){
    $("#team-posts").append('<div class="'+i+'">'+arrayName[i]+'</div>');
}

【讨论】：

【解决方案2】：

在调用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);
}

【讨论】：

【解决方案3】：

"undo" plugin 怎么样？假设它适用？

【讨论】：

【解决方案4】：

保存原始订单的解决方案可能是最好的，但如果你必须动态排序，你可以使用这个：

http://www.w3schools.com/jsref/jsref_sort.asp

function orderPosts() {
    var $grp = $("#team-posts"),
        ordered = $grp.children().toArray().sort(function(a, b) {
            return parseInt($(a).text()) > parseInt($(b).text());
        });
    $grp.empty().append(ordered);
}

【讨论】：