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