我可以使用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); 
} 

，您可以用这些像 下移（$（ '＃menuAbout'））; 和menuAbout项目会向下移动。

如果你想扩展jQuery来包括这些方法，你会写这样的：

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

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

，现在你可以调用的功能，如 $（“＃menuAbout”）下移（）。

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