Invertir orden de un conjunto de elementos

que tiene un conjunto de divs que tiene este aspecto:Invertir orden de un conjunto de elementos

<div id="con"> 
    <div> 1 </div> 
    <div> 2 </div> 
    <div> 3 </div> 
    <div> 4 </div> 
    <div> 5 </div> 
</div>

Pero quiero que dar la vuelta para que se vea así:

<div> 5 </div> 
<div> 4 </div> 
<div> 3 </div> 
<div> 2 </div> 
<div> 1 </div>

Para que cuando se agrega un div irá al final de la lista ....

¿Cómo puedo hacer esto (o hay una mejor manera de hacerlo)?

Fuente

2011-10-30 user1020293

_ "Así que cuando se añade un div que irá al final de la lista ...." _ - es su pregunta de cómo revertir elementos existentes (algunas buenas respuestas para eso a continuación), o cómo agregar nuevos elementos en un lugar en particular? A partir de su salida deseada, si agregó un nuevo '

' ¿debería ir por debajo de 1 o por encima de 5? – nnnnnn

envuelta como un buen func jQuery iones disponibles en cualquier conjunto de selecciones:

$.fn.reverseChildren = function() { 
    return this.each(function(){ 
    var $this = $(this); 
    $this.children().each(function(){ $this.prepend(this) }); 
    }); 
}; 
$('#con').reverseChildren();

Prueba: http://jsfiddle.net/R4t4X/1/

Editar: fijado a apoyar selecciones jQuery arbitrarias

Fuente

2011-10-30 13:05:09 Phrogz

+1 fácil de leer, comprender, mantener y cambiar por cualquier desarrollador. –

Una manera:

function flip(){ 
var l=$('#con > div').length,i=1; 
while(i<l){ 
    $('#con > div').filter(':eq(' + i + ')').prependTo($('#con')); 
    i++; 
} 
}

Fuente

2011-10-30 01:38:49 Shad

+1 por brevedad. –

sin biblioteca:

function reverseChildNodes(node) { 
    var parentNode = node.parentNode, nextSibling = node.nextSibling, 
     frag = node.ownerDocument.createDocumentFragment(); 
    parentNode.removeChild(node); 
    while(node.lastChild) 
     frag.appendChild(node.lastChild); 
    node.appendChild(frag); 
    parentNode.insertBefore(node, nextSibling); 
    return node; 
} 

reverseChildNodes(document.getElementById('con'));

jQuery al estilo:

$.fn.reverseChildNodes = (function() { 
    function reverseChildNodes(node) { 
     var parentNode = node.parentNode, nextSibling = node.nextSibling, 
      frag = node.ownerDocument.createDocumentFragment(); 
     parentNode.removeChild(node); 
     while(node.lastChild) 
      frag.appendChild(node.lastChild); 
     node.appendChild(frag); 
     parentNode.insertBefore(node, nextSibling); 
     return node; 
    }; 
    return function() { 
     this.each(function() { 
      reverseChildNodes(this); 
     }); 
     return this; 
    }; 
})(); 

$('#con').reverseChildNodes();

jsPerf Test

Fuente

2011-10-30 05:00:15 Saxoier

Lindo, pero mucho más trabajo y código de lo necesario. – Phrogz

Sí, también es muy difícil de leer para todos, y por lo tanto, cambia y se mantiene cuando se compara con la solución a continuación. –

@Phrogz y Michael Durrant: si prefiere más de dos reflujos que puede [esta versión] (http://jsfiddle.net/akfHm/). – Saxoier

Otro (simple?) de vainilla Javascript respuesta: http://jsfiddle.net/d9fNv/

var con = document.getElementById('con'); 
var els = Array.prototype.slice.call(con.childNodes); 
for (var i = els.length -1; i>=0; i--) { 
    con.appendChild(els[i]); 
}

Alternativamente, un método más corto pero menos eficiente: http://jsfiddle.net/d9fNv/1/

var con = document.getElementById('con'); 
Array.prototype.slice.call(con.childNodes).reverse().forEach(function(el) { 
    con.appendChild(el); 
});

Fuente

2011-10-30 23:06:16 Benjie

Una solución de vainilla JS:

function reverseEls(elem){ 
     for (var i=0;i<elem.childNodes.length;i++) 
      elem.insertBefore(elem.childNodes[i], elem.firstChild); 

}

Fuente

2016-06-16 13:25:34

Invertir orden de un conjunto de elementos

Respuesta

Cuestiones relacionadas