How do I move list items?

Question

I have a normal unordered list

   
Item 1
   
Item 2
   
Item 3
   
Item 4
         


        

Answer 1

This does everything but the animation:

$('li').click(function() {
    var $this = $(this);
    $this.insertAfter($this.siblings(':eq(0)'));
});

When you click on a list item, it will insert it after the first item in the

, i.e. the second position in the list.

Furthermore, you could animate this in various ways. Here's one:

$('li').click(function() {
    var $this = $(this),
        callback = function() {
            $this.insertAfter($this.siblings(':eq(0)'));
        };
    $this.slideUp(500, callback).slideDown(500);
});

Here's a working demo.