Czy mogę używać jQuery do łatwego przesuwania elementów li w górę lub w dół?

Question

Mam menu jak poniżej:

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

Czy istnieje prosty sposób, że można używać jQuery ponowne zamawianie elementów? Wyobrażam sobie coś takiego:

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

Ale każdy inny sposób osiągnięcia tego jest mile widziany.

Answer 1

To nie jest rzeczywiście takie trudne. JQuery prawie dostanie się tam sam dzięki metodom "insertBefore" i "insertAfter".

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

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

Można z nich korzystać jak moveDown ($ ('# menuAbout')); i menuO pozycji przesunąłby się w dół.

Jeśli chciał przedłużyć jQuery do uwzględnienia tych metod, należy napisać to tak:

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

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

a teraz można wywoływać funkcje jak $ ("# menuAbout") moveDown();.

Answer 2

Brak rodzimych metod prototypal, ale można zrobić jeden prosty sposób:

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

używa jQuery.prototype.after