Le moyen le plus simple de trier les nœuds DOM?

Question

Si j'ai une liste comme ceci:

<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> 

Quelle est la meilleure façon de réarranger les noeuds DOM à ma préférence? (Cela doit se faire automatiquement lorsque la page est chargée, la préférence d'ordre de liste est obtenue à partir d'un 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

Bien qu'il y ait probablement un moyen plus facile de le faire en utilisant une bibliothèque JS, voici une solution de travail en utilisant js vanille.

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

Vous pourriez constater que le tri des nœuds DOM ne fonctionne pas correctement. Une approche différente serait d'avoir dans votre javascript un tableau qui représente les données qui iraient dans les nœuds DOM, trier ces données, puis régénérer la div qui contient les nœuds DOM. Peut-être que vous n'avez pas autant de nœuds à trier, donc cela n'aurait pas d'importance. Mon expérience est basée sur essayer de trier les tables HTML en manipulant le DOM, y compris les tables avec des centaines de lignes et quelques dizaines de colonnes.

Answer 3

Si vous utilisez déjà jQuery, je vous recommande tinysort: http://tinysort.sjeiti.com/

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

Answer 4

sans analyser trop si cela apporte quelque chose de nouveau à la table, je l'habitude d'utiliser ceci:

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); 
} 

où item est un tableau d'enfants du même parent. on enlève en commençant par le dernier et en ajoutant en commençant par le premier pour éviter de scintiller dans la partie supérieure qui est probablement à l'écran. je reçois habituellement mon tableau articles comme celui-ci:

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

Answer 5

Voir en action: 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); 
      }); 
     }; 
    })(); 

Terse

Answer 6

Ma version, l'espoir serait utile pour les autres:

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

Voici une fonction ES6 pour trier les nœuds DOM en place:

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

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

Voilà comment vous l'utiliser pour trier 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; 
    } 
});