¿La manera más fácil de clasificar los nodos DOM?

Question

Si tengo una lista como esta:

<ul id="mylist"> 
    <li id="list-item1">text 1</li> 
    <li id="list-item2">text 2</li> 
    <li id="list-item3">text 3</li> 
    <li id="list-item4">text 4</li> 
</ul> 

¿Cuál es la forma más fácil de volver a organizar los nodos DOM a mi preferencia? (Esto debe suceder automáticamente cuando se carga la página, la preferencia de orden de lista se obtiene de una cookie)

E.g.

<ul id="mylist"> 
    <li id="list-item3">text 3</li> 
    <li id="list-item4">text 4</li> 
    <li id="list-item2">text 2</li> 
    <li id="list-item1">text 1</li> 
</ul> 

Answer 1

Aunque es probable que haya una manera más fácil de hacer esto utilizando una biblioteca de JS, aquí es una solución de trabajo utilizando vainilla js.

var list = document.getElementById('mylist'); 

var items = list.childNodes; 
var itemsArr = []; 
for (var i in items) { 
    if (items[i].nodeType == 1) { // get rid of the whitespace text nodes 
     itemsArr.push(items[i]); 
    } 
} 

itemsArr.sort(function(a, b) { 
    return a.innerHTML == b.innerHTML 
      ? 0 
      : (a.innerHTML > b.innerHTML ? 1 : -1); 
}); 

for (i = 0; i < itemsArr.length; ++i) { 
    list.appendChild(itemsArr[i]); 
} 

Answer 2

Es posible que la ordenación de los nodos DOM no tenga un buen rendimiento. Un enfoque diferente sería tener en su javascript una matriz que represente los datos que entrarían en los nodos DOM, ordenarlos y luego regenerar el div que contiene los nodos DOM.

Quizás no tengas tantos nodos para ordenar, por lo que no importaría. Mi experiencia se basa en intentar ordenar tablas HTML manipulando el DOM, incluidas las tablas con cientos de filas y un par de docenas de columnas.

Answer 3

Si ya está usando jQuery, me gustaría recomendar tinysort: http://tinysort.sjeiti.com/

$("li").tsort({order:"asc"}); 
$("li").tsort({order:"desc"}); 

Answer 4

sin analizar demasiado si esto trae nada nuevo a la mesa, que suelen utilizar esto:

function forEach(ar, func){ if(ar){for(var i=ar.length; i--;){ func(ar[i], i); }} } 
function removeElement(node){ return node.parentNode.removeChild(node); } 
function insertBefore(ref){ return function(node){ return ref.parentNode.insertBefore(node, ref); }; } 

function sort(items, greater){ 
    var marker = insertBefore(items[0])(document.createElement("div")); //in case there is stuff before/after the sortees 
    forEach(items, removeElement); 
    items.sort(greater); 
    items.reverse(); //because the last will be first when reappending 
    forEach(items, insertBefore(marker)); 
    removeElement(marker); 
} 

donde item es una matriz de hijos del mismo padre. removemos empezando por el último y añadimos el que comienza con el primero para evitar el parpadeo en la parte superior, que probablemente esté en la pantalla. Por lo general obtener mi artículo en su conjunto como esto:

forEachSnapshot(document.evaluate(..., 6, null), function(n, i){ items[i] = n; }); 

Answer 5

verlo en acción: http://jsfiddle.net/stefek99/y7JyT/

jQuery.fn.sortDomElements = (function() { 
     return function(comparator) { 
      return Array.prototype.sort.call(this, comparator).each(function(i) { 
        this.parentNode.appendChild(this); 
      }); 
     }; 
    })(); 

Conciso

Answer 6

Mi versión, la esperanza sería útil para los demás:

var p = document.getElementById('mylist'); 
Array.prototype.slice.call(p.children) 
    .map(function (x) { return p.removeChild(x); }) 
    .sort(function (x, y) { return /* sort logic */; }) 
    .forEach(function (x) { p.appendChild(x); }); 

Answer 7

Aquí hay una función ES6 para ordenar los nodos DOM en su lugar:

const sortChildren = ({ container, childSelector, getScore }) => { 
    const items = [...container.querySelectorAll(childSelector)]; 

    items 
    .sort((a, b) => getScore(b) - getScore(a)) 
    .forEach(item => container.appendChild(item)); 
}; 

Así es como usted lo utilizaría para ordenar Untapped user reviews by score:

sortChildren({ 
    container: document.querySelector("#main-stream"), 
    childSelector: ".item", 
    getScore: item => { 
    const rating = item.querySelector(".rating"); 
    if (!rating) return 0; 
    const scoreString = [...rating.classList].find(c => /r\d+/.test(c)); 
    const score = parseInt(scoreString.slice(1)); 
    return score; 
    } 
});