Question

我有一个DOM元素数组（li s），我想根据li的属性重新排序。

目前我尝试：

将li存储在数组中。
启动jQuery动画队列。
然后将以下内容添加到队列中：
1. 动画所有li s远离
2. 使用li与dom分离jQuery.detach() {/ 1}}。
3. 将sort（）函数应用于数组。
4. 将重新排序的li添加回DOM，并将它们设置为位置＆lt;＆lt;在这里打破
然后我运行队列。

目前，当我尝试将数组中的元素添加回DOM时，由于存储在数组中的元素存在某种问题，所以没有添加任何内容。

这是我的代码：

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");

基本上我只是从jQuery中得到一些东西：

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

我希望对它们进行排序，然后将它们放入DOM中......由于某种原因它不起作用......

Answer 1

我真的无法理解您要对代码执行的操作。这是一个简单的jQuery代码块，它接受一组li标签，将它们从DOM中删除，按照数据视图数据对它们进行排序，然后按照我们认为你要求的排序顺序重新插入它们。

您可以在此处查看：http://jsfiddle.net/jfriend00/xwTsb/

HTML：

<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>

JS：

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

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

Javascript / jQuery重新排序li的数组

1 个答案: