jquery, move an inner element to the first position?

Question

Lets say you have a list of items:

<ul id="ImportantNumbers">
   <li id="one"></li>
   <li id="two"></li>
   <li id="topNumber"></li>
   <li id="four"></li>
</ul>

Every five seconds these list items get reordered.

Using jquery whats the best way to keep #topNumber, at the top of the list during the reordering.

Answer 1

You can use .prependTo() immediately after the re-order, like this:

$("#topNumber").prependTo("#ImportantNumbers");

You can see it working here, all it's doing is taking the element and inserting it as the first child on the <ul>, effectively moving it to the top.

Alternatively when you sort, use :not() to exclude it depending on how the sorting works, for example:

$("#ImportantNumbers li:not(#topNumber)").randomize();