Javascript/jQuery对li'的重新排序；列阵

我有一个DOM元素数组（

li

s），我想根据

li

s的属性对其重新排序

目前，我尝试：

将

li

s存储在一个数组中

启动jQuery动画队列

然后将以下内容添加到队列中：

设置所有

li

s的动画

使用

jQuery.Detach（）

从dom中分离所说的

li

s

将sort（）函数应用于数组

---

将重新排序的

li

s添加回DOM，并将其动画化到位置我真的无法理解您试图对代码执行的操作。这里有一个简单的jQuery代码块，它接受一组li标记，将它们从DOM中删除，按它们的数据视图数据对它们进行排序，然后按排序的顺序重新插入它们，我想这就是您所要求的

您可以在此处看到它的工作原理：

HTML:

---

我把它留给你去添加任何你想要的动画。

我认为人们需要更多的相关代码（在你展示之前），并且需要看到实际的HTML。还有，接下来做什么；做如果您真的想从DOM中删除一堆项并保存它们，我很难理解您为什么要使用队列。为什么不为它们创建一个选择器，遍历每个对象，将DOM对象推送到一个数组上，然后将其从DOM中删除呢。所有这些带有延迟执行功能队列的业务看起来是一种复杂的做事方式。@kingjiv：通常是这样。但是，是的，OP省略了相关代码。

jQuery.each(self.filterSet, function (i, e) {
    //loop thru array queing up hiding of elements          
    var self = this;
    if ((i + 1) < filterSetLength) {
        theQueue.queue("Q1", function (next) {
            self = $(self).detach();
            next();
        });
    } else {
        //break on last element so that animation doesn't overlap with showing of filtered elements     
        theQueue.queue("Q1", function (next) {
            self = $(self).detach();
            next();
        });
    }
});

self.filterSet.sort(function (a, b) {
    var c = parseInt($(a).attr('data-views'));
    var d = parseInt($(b).attr('data-views'));
    if (c < d) {
        return 1;
    }
    if (c > d) {
        return -1;
    }
    return 0;
});

self.location.find('li:not(.cloned) ul.tiles').each(function (i) {
    //per panel....
    var limit = 11 * (i + 1);
    var self = this;
    for (e = 0; e < limit; e++) {
        if (filterSet[e] != undefined) {
            theQueue.queue("Q2", function (next) {
                $(self).append(filterSet[e]).show().fadeIn();
                next();
            });
        } else {
            break;
        }
    }
});

//add second queue in to end of first queue
theQueue.queue("Q1", function (next) {
    theQueue.dequeue("Q2");
    next();
});
//run everything
theQueue.dequeue("Q1");

var filterSet = new Array();
var filterSet = this.find('li:not(.cloned) ul.tiles li').each(function () {
      filterSet.push(this);
});

<button id="pressMe" type="button">Sort</button><br><br>

<ul id="master">
    <li data-views="5">Fifth</li>
    <li data-views="2">Second</li>
    <li data-views="6">Sixth</li>
    <li data-views="3">Third</li>
    <li data-views="1">First</li>
    <li data-views="4">Fourth</li>
</ul>

$("#pressMe").click(function() {
    var savedObjects = [];
    $("#master li").each(function(i, o){
        var data = new Object();
        data.views = $(this).attr("data-views");  // get data for sorting
        data.o = $(this).detach();                // detach and save
        savedObjects.push(data);                  // save for later
    });

    // sort by view data (treated as a number)
    savedObjects.sort(function(a,b) {return(Number(a.views) - Number(b.views))});

    var master = $("#master");
    $.each(savedObjects, function(i, o) {
        master.append(this.o);                     // add back to DOM
    });
});