Foros del Web » Programando para Internet » Javascript »

Invertir el orden en lista ul

Estas en el tema de Invertir el orden en lista ul en el foro de Javascript en Foros del Web. Hola, tengo una duda y ya estuve buscando. Hay alguna manera de invertir una lista html con jquery, es decir: Tengo una lista así: <ul> ...
  #1 (permalink)  
Antiguo 04/07/2013, 06:28
 
Fecha de Ingreso: diciembre-2009
Mensajes: 12
Antigüedad: 14 años, 4 meses
Puntos: 1
Invertir el orden en lista ul

Hola, tengo una duda y ya estuve buscando. Hay alguna manera de invertir una lista html con jquery, es decir:

Tengo una lista así:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

Y quiero que se invierta:

<ul>
<li>4</li>
<li>5</li>
<li>6</li>
<li>1</li>
</ul>

Me imagino que con html no se puede, por eso busco alguna solución con javascript.

Gracias!
  #2 (permalink)  
Antiguo 04/07/2013, 07:19
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 1 mes
Puntos: 574
Respuesta: Invertir el orden en lista ul

Divide y venceras...

Primero debes leer esos datos y guardarlos en un array, reordenar el array y escribirlos de nuevo.

Tienes document.getElementByTagName que te da la coleccion de un tipo de tags.
Una vez los leas debes introducir su innerHTML en un array.
Luego usa .sort() para ordenar el array

Un ejemplo
Cita:
//Sort numerically and descending:
var myarray=[25, 8, 7, 41]
myarray.sort(function(a,b){return b - a}) //Array now becomes [41, 25, 8, 7]
Luego accedes otra vez a la colección de li y cambias el innerHTML por el del array...


Algo asi.... (no lo he probado).

Código Javascript:
Ver original
  1. function ordenaLi(){
  2. var arrayLis=new Array();
  3. var coleccionLis=document.getElementByTagName("li");
  4. for (var i=0;i<coleccionLis.length;i++){
  5.     arrayLis[i]=parseInt(coleccionLis[i].innerHTML);
  6. }
  7. arrayLis.sort(function(a,b){return b - a});
  8. for (var i=0;i<coleccionLis.length;i++){
  9.     coleccionLis[i].innerHTML=arrayLis[i];
  10. }
  11. }
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.

Última edición por quimfv; 04/07/2013 a las 07:27

Etiquetas: html, invertir, jquery, lista, orden
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:46.