javascript – jQuery：移动元素位置

在每个div中,有两个按钮：更高和更低.单击“更高”时,如果此div不在顶部位置,则将其移动到高于原始位置.单击“较低”时,元素将移动低于原始元素.

问题是：如何使元素相对于另一个元素上下移动？

<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>

解决方法

你可以试试这样的东西： http://www.jsfiddle.net/yijiang/hwPPP/

使用insertAfter和insertBefore,我们可以上下移动按钮的父级.

$('#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;
});