我可以使用jQuery轻松地向上或向下移动li元素吗？

Question

我有这样一个菜单:

    <ul id="menu" class="undecorated"> 
        <li id="menuHome"><a href="/">Home</a> </li> 
        <li id="menuAbout"><a href="/Usergroup/About">About</a> </li> 
        <li id="menuArchives"><a href="/Usergroup/Archives">Archives</a> </li> 
        <li id="menuLinks"><a href="/Usergroup/Links">Links</a> </li> 
    </ul> 

有一种简单的方法可以使用jquery重新排序元素吗？我想象的是这样的:

$('#menuAbout').moveDown().moveDown()

但是,任何其他实现这一点的方式都值得赞赏

Answer 1

实际上并不那么难.JQuery几乎可以通过"insertBefore"和"insertAfter"方法自行获取.

function moveUp($item) {
    $before = $item.prev();
    $item.insertBefore($before);
}

function moveDown($item) {
    $after = $item.next();
    $item.insertAfter($after);
}

你可以像moveDown一样使用这些($('#menuAbout')); 并且menuAbout项目将向下移动.

如果你想扩展jQuery以包含这些方法,你可以像这样写:

$.fn.moveUp = function() {
    before = $(this).prev();
    $(this).insertBefore(before);
}

$.fn.moveDown = function() {
    after = $(this).next();
    $(this).insertAfter(after);
}

现在你可以像$("#menuAbout")一样调用函数.removeDown();

Answer 2

没有原生的原型方法,但你可以轻松制作一个:

$.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()

这使用jQuery.prototype.after