Javascript/jQuery re-ordering of li's in array

Question

I have an array of DOM elements (lis) that I want to re-order based on an attribute of the lis.

Currently I try to:

Store the lis in an array.
Initiate a jQuery animation queue.
Then add to the queue the following:
1. Animating ALL the lis away
2. Detach said lis from dom with jQuery.detach().
3. Applying a sort() function to the array.
4. ADD the re-ordered lis back to the DOM and animate them in to position << breaks here
Then I run the queue.

At the moment due to some sort of issue with the elements stored in the array when I try to add the elements from the array back in to the DOM nothing is added.

Here's my code:

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

Basically I simply have an array of things from jQuery:

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

and I want to sort them and then put them in to the DOM.... for some reason it won't work...

I think folks will need more of the relevant code (that comes before what you show here) and will need to see the actual HTML. Also, what does next(); do? If you're really trying to just remove a bunch of items from the DOM and save them, I'm having a hard time understand why you're using queue. Why not just make a selector for them, iterate through each, push the DOM object onto an array and remove it from the DOM. All this business with a deferred execution function queue looks like the complicated way to do things. — jfriend00
– jfriend00, Commented Jul 15, 2011 at 16:35
@kingjiv: Usually it would be something like a jNode of an empty object. But, yes, the OP has omitted relevant code. — Brock Adams
– Brock Adams, Commented Jul 15, 2011 at 17:18

jfriend00 · Accepted Answer · 2011-07-15 17:56:45Z

I really can't follow what you're trying to do with your code. Here's a simple jQuery code block that takes a set of li tags, removes them from the DOM, sorts them by their data-views data and reinserts them in sorted order which I think is what you asked for.

You can see it work here: 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
    });
});

I leave it to you to add whatever animation you want to this.

Collectives™ on Stack Overflow

Javascript/jQuery re-ordering of li's in array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related