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"）のような関数を呼び出すことができますmoveDown（）;

Answer 2

ネイティブ原型方法がありますが、簡単に1を加えることができます。

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