How do I move list items?

Question

I have a normal unordered list

   
Item 1
   
Item 2
   
Item 3
   
Item 4

        

Answer 1

Add an id to the unordered list (<ul id="list">), and add it after the second child.

$('#list li').click(function() {
    $(this).insertAfter("#list li:nth-child(1)");
});

This only works for elements after the first, but an example is on jsFiddle.

Answer 2

Take a look at nth selector here http://api.jquery.com/nth-child-selector/ it could help you.

Answer 3

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 <ul>, 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.