Posso usare jQuery per spostare facilmente gli elementi li su o giù?

Question

Ho un menù come questo:

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

C'è un modo semplice che posso usare jQuery per riordinare gli elementi? Sto immaginando qualcosa del genere:

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

Ma qualsiasi altro modo per raggiungere questo è apprezzato.

Answer 1

In realtà non è così difficile. JQuery ti fa quasi arrivare da solo con i metodi "insertBefore" e "insertAfter".

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

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

Si potrebbe utilizzare questi come moveDown ($ ('# menuAbout')); e l'elemento menuAbout si sposterebbe verso il basso.

Se si voleva estendere jQuery per includere questi metodi, si può scrivere in questo modo:

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

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

e ora è possibile richiamare le funzioni come $ ("# menuAbout") moveDown();.

Answer 2

No Metodi prototipali nativi, ma si può fare uno facilmente:

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

Questo utilizza jQuery.prototype.after