Cambiar orden de un <ul> con JS o Jquery

[Extreme_Program]

Hola, pues como dice el título. Quisiera hacer eso. Es decir, tengo una lista y que al dar clic sobre un botón cambie el orden de la misma:

Orden inicial:

Código:

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<button>Cambiar orden</button>

Orden nuevo:

Código:

<ul>
    <li>C</li>
    <li>B</li>
    <li>A</li>
</ul>
<button>Cambiar orden</button>

Agradecería bastante que me ayuden c:

[caricatos]

Hola:

Cargar la librería es una carga adicional... así que sin duda la primera opción es la mejor..

Saludos

[IsaBelM]

Has de trabajar con insertbefore() https://developer.mozilla.org/es/doc.../insertarAntes

[eContento]

Lo primero es que cuando hagamos click sobre el botón, se llame a una función que vamos a llamar sort();

Código:

var button = document.querySelector("button");
button.addEventListener("click", function(){
	sort();
})

Esta función se encargará de obtener todos los elementos <li> y de ordenarlos.

Para ordenarlos usará otra función compare(a,b), donde a y b serán dos elementos LIs, por lo que tendremos que comparar su contenido para saber que LI va antes que otro. De esta forma que devolverá -1 cuando el contenido de a < b, 1 al contrario, y 0 si son iguales.

Código:

function compare(a,b){
  if (a.textContent < b.textContent) {
    return -1;
  } else if (a.textContent > b.textContent) {
    return 1;
  } else {
    return 0;
  }
}

De esta forma, yo puedo llamar al método de los arrays sort() pasándole la función compare como argumento.

Código:

array_ordenado = un_array.sort(compare)

Aquí el problema es que document.querySelectorAll("li"); no devuelve un array si no un NodeList, que se parece mucho a un array, pero no tiene métodos propios de estos como: indexOf(), sort(), o reverse(), que nos pueden ser útiles en tu caso.

Pero eso, lo podemos solventar con:

Código:

var arrayLIs = Array.prototype.slice.call(nodeList);

Donde el resultado ya es un array y por tanto podemos ordenarlo, sort(), o invertirlo reverse().

Y quedaría así:

Código:

function sort(){
  var nodeList = document.querySelectorAll("li");
  var arrayLIs = Array.prototype.slice.call(nodeList);
  var objUL = document.querySelector("ul");
  if (!isAsc){
    arrayLIs = arrayLIs.sort(compare);
    isAsc = true;
  } else {
    arrayLIs = arrayLIs.reverse();
    isAsc = false;
  }
  objUL.innerHTML = "";
  for (var i = 0; i < arrayLIs.length; i++) {
    objUL.appendChild(arrayLIs[i]);
  }
}

Con jQuery, desde luego es mucho más fácil, pero he preferido hacerlo en JavaScript puro y duro, porque luego es que parece que se nos olvida el estándar.

He dejado el código en un "fiddle", por si quieres trastear.
https://jsfiddle.net/jjimenezt/xg21ab3r/

Espero haber sido lo suficientemente didáctico.

Un saludo