Question

Is it possible to reorder <li> elements with JavaScript or pure jQuery. So if I have a silly list like the following:

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Cheese</li>
</ul>

How would I move the list elements around? Like put the list element with Cheese before the list element with Foo or move Foo to after Bar.

Is it possible? If so, how?

Answer 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
});