Can I use jQuery to easily shift li elements up or down?
No native prototypal methods, but you can make one easily:
$.fn.moveDown = function() {
return this.each(function() {
var next = $(this).next();
if ( next.length ) {
$(next).after(this);
} else {
$(this).parent().append( this );
}
})
}
$('#menuAbout').moveDown().moveDown()
This uses jQuery.prototype.after
It's actually not that hard. JQuery almost gets you there by itself with the insertBefore and insertAfter methods.
function moveUp($item) {
$before = $item.prev();
$item.insertBefore($before);
}
function moveDown($item) {
$after = $item.next();
$item.insertAfter($after);
}
You could use these like
moveDown($('#menuAbout'));
and the menuAbout item would move down.
If you wanted to extend jQuery to include these methods, you would write it like this:
$.fn.moveUp = function() {
before = $(this).prev();
$(this).insertBefore(before);
};
$.fn.moveDown = function() {
after = $(this).next();
$(this).insertAfter(after);
};
and now you can call the functions like
$("#menuAbout").moveDown();