2012-04-10 12 views
8

tengo 3 divs quieren invertir el orden en la lista doucmentjQuery reordenación divs

<div id="block-1">First</div> 
<div id="block-2">Second</div> 
<div id="block-3">Third</div> 

¿Cómo puedo hacer esto en jQuery?

+3

¿Por qué querría invertirlos en el documento listo? ¿Por qué no cargarlos al revés inicialmente? –

Respuesta

3

Esto invertirá todos los divs dentro de un div con id "div1"

$(function(){ 
    var items=$("#div1 div").toArray(); 
     items.reverse(); 
     $.each(items,function(){ 
      $("#div1").append(this); 
     });  
    });​ 

Aquí es el jsFiddle http://jsfiddle.net/bCAVz/8/

+0

Me gusta el uso de toArray(): además del reverse genérico() que se me pidió, también puedo usarlo para aleatorizar, etc. –

19
<div id="parent"> 
<div id="block-1">First</div> 
<div id="block-2">Second</div> 
<div id="block-3">Third</div> 
</div> 

Y tratar esto en Jquery

$('#parent > div').each(function() { 
    $(this).prependTo(this.parentNode); 
});​ 

se puede ver ejemplo en jsFiddle http://jsfiddle.net/N7PGW/

+2

+1 por no confiar en conocer la identificación o el número de divs en el padre . –

0
$(
    $("div[id|=block]") 
     .slice(1) 
     .get() 
     .reverse() 
) 
    .insertBefore("div[id|=block]:first"); 

http://jsfiddle.net/8adwS/

También tenga en cuenta que se puede añadir la matriz inversa sintaxis para la sintaxis de la función de jQuery, que te salvaría un selector.