jQuery arrange li order by clicking on a link

Question

Need to change li position by clicking to move up or to move down.

<div>
  <ul>
    <li>Item1  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item2  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item3  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item4  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item5  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
  </ul>
</div>

So what should happen here, for example, if we click Move up on Item2, the Item 2 will move up before Item 1.

I tryed to do like this, but it doesn't work:

$(".moveUp").click(function () {
    var thisLine = $(this).parent();
    var prevLine = thisLine.prev();
    prevLine.insertAfter(thisLine);
});

Hope some one can help me...

Answer 1

Try this:

$(".moveUp").click(function () {
    var thisLine = $(this).parent();
    var prevLine = thisLine.prev();
    prevLine.before(thisLine);
});

$(".moveDown").click(function () {
    var thisLine = $(this).parent();
    var prevLine = thisLine.next();
    prevLine.after(thisLine);
});

Working jsFiddle here.

Answer 2

Try this.

$(".moveUp").click(function () {
    var $parent = $(this).parent();
    $parent.prev().before($parent);
});
$(".moveDown").click(function () {
    var $parent = $(this).parent();
    $parent.next().after($parent);
});

Working demo - http://jsfiddle.net/vQmHU/

Answer 3

This should work and will also not move the element outside of the UL when you try and move it up at the top or down at the bottom:

$('.moveUp').click(function(){
    var liItem = $(this).parent();
    if (liItem.prev().is('li'))
    {
        liItem.insertBefore(liItem.prev())
    }
});

$('.moveDown').click(function(){
    var liItem = $(this).parent();
    if (liItem.next().is('li'))
    {
        liItem.insertAfter(liItem.next())
    }
});

Working Example: http://jsfiddle.net/BDecp/

Also, your code should be wrapped with this:

$(document).ready(function () {
    //Code Here
});