¿Puedo usar jQuery para desplazar fácilmente los elementos li hacia arriba o hacia abajo?

Question

que tienen un menú como este:

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

¿Hay una manera sencilla que puedo usar jQuery para cambiar el orden de los elementos? Me estoy imaginando algo como esto:

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

embargo, cualquier otra forma de lograr esto es apreciado.

Answer 1

En realidad no es tan difícil. JQuery casi te lleva allí solo con los métodos "insertBefore" e "insertAfter".

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

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

Usted podría utilizar estos como moveDown ($ ('# menuAbout')); y el menú sobre el elemento se moverá hacia abajo.

Si quería extender jQuery para incluir estos métodos, podría escribir así:

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

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

y ahora se puede llamar a las funciones como $ ("# menuAbout") moveDown();.

Answer 2

No hay métodos prototípicos nativos, pero se puede hacer fácilmente uno:

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

Esto utiliza jQuery.prototype.after