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>
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>
2 Answers
Reset to default 6You can try something like this: http://www.jsfiddle/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;
});
Maybe you should look into something like JqueryUI Sortable:
http://jqueryui./demos/sortable/
Otherwise you could use next()/previous() and insertBefore()/insertAfter() jquery functions together:
$("#a1").insertAfter($('#a1').next());