jQuery：移动元素位置

Question

In each div, there are two buttons: higher and lower. When 'higher' is clicked, if this div is not at the top position, then it is moved higher than original. When 'lower' is clicked, then the element will be moved lower than original.

The question is: How to the elements can be moved up and down of with respect to another element?

<div>
    <div id="a1">a1<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div>
    <div id="a2">a2<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div>
    <div id="a3">a3<input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></div>
</div>

Answer 1

You can try something like this: http://www.jsfiddle.net/yijiang/hwPPP/

With insertAfter and insertBefore we can move the parent of the buttons up and down.

$('#list').delegate('input[type="button"]', 'click', function() {
    var parent = $(this).parent();

    if(this.value === 'higher'){
        parent.insertBefore(parent.prev());
    } else {
        parent.insertAfter(parent.next());
    }

    return false;
});

Answer 2

Maybe you should look into something like JqueryUI Sortable:

http://jqueryui.com/demos/sortable/

Otherwise you could use next()/previous() and insertBefore()/insertAfter() jquery functions together:

$("#a1").insertAfter($('#a1').next());