Alex Alex - 7 months ago 10
Javascript Question

reorder list elements - jQuery?

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