reorder list elements - jQuery? [duplicate]

Solution 1:

var ul = $("ul");
var li = ul.children("li");

li.detach().sort();
ul.append(li);

This is a simple example where <li> nodes are sorted by in some default order. I'm calling detach to avoid removing any data/events associated with the li nodes.

You can pass a function to sort, and use a custom comparator to do the sorting as well.

li.detach().sort(function(a, b) {
   // use whatever comparison you want between DOM nodes a and b
});

Solution 2:

If someone is looking to reorder elements by moving them up/down some list one step at a time...

//element to move
var $el = $(selector);

//move element down one step
if ($el.not(':last-child'))
    $el.next().after($el);

//move element up one step
if ($el.not(':first-child'))
    $el.prev().before($el);

//move element to top
$el.parent().prepend($el);

//move element to end
$el.parent().append($el);