Manière la plus facile de trier les nœuds DOM?

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 nœuds DOM de ma préférence? (Cela doit se faire automatiquement lors du chargement de la page, la liste d'ordre de préférence est obtenu à 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>
  • Je ne suis pas sûr si cela va vous aider, mais si vous êtes en utilisant une technologie côté serveur (comme PHP) sur cette page, alors il doit également avoir accès aux cookies. en PHP, c'est dans le global $_COOKIE tableau.
InformationsquelleAutor James | 2008-11-12
  1. 72

    Si il y a probablement un moyen plus facile de le faire à l'aide d'une Bibliothèque JS, voici une solution qui fonctionne à l'aide de la vanille 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]);
}
    • Merci pour votre solution NickF, je vais l'adapter un peu depuis que je suis à l'aide de jQuery, mais je pense que j'ai une idée de comment le faire maintenant, merci! 🙂
    • En utilisant list.children au lieu de list.childNodes, vous pouvez éviter de le vérifier pour les nœuds de texte.
    • Quand j'ai lu cette réponse, j'ai pensé à la vanille js? Pourquoi est vanilla.js ici? :^)
    • sur la charge de travail dans IE (même IE11!)
    • developer.mozilla.org/en-US/docs/Web/API/ParentNode/...
    InformationsquelleAutor nickf
  2. 17

    Vous trouverez peut-être que trier les nœuds DOM ne fonctionne pas bien. Une autre approche serait d'avoir dans votre javascript un tableau qui représente les données qui permettraient d'aller dans le DOM nœuds, de sorte que les données, puis régénérer les div qui contient les nœuds DOM.

    Peut-être que vous n'avez que le nombre de nœuds de trier, de sorte qu'il ne serait pas question. Mon expérience est basée sur le fait d'essayer de trier des tableaux HTML en manipulant le DOM, y compris les tableaux, avec des centaines de lignes et un couple douzaine de colonnes.

    InformationsquelleAutor Corey Trager
  3. 13

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

    Laconique

    • Nice! J'aime aussi les choses laconique, donc, sur cette base, je suis venu avec un très simple fonction jQuery qui vous permet de fournir un rappel fonction qui calcule la valeur de tri. (J'ai inclus deux exemples: le tri d'une liste par ordre alphabétique, et le tri d'un tableau par une valeur numérique dans la première colonne à la fois, essentiellement, one-liners.)
    • Je sais que c'est un vieux post, mais puis-je vous demander, quel est l'avantage de l'utilisation d'une self de l'exécution de la fonction de retour de la sortDomElements fonction? Ne serait-il pas plus laconique-à-dire jQuery.fn.sortDomElements = function(comparitor)... ? comme ceci jsfiddle.net/y7JyT/77
    InformationsquelleAutor Mars Robertson
  4. 12

    Utilisation es6 syntaxe de recourir enfants:

    var list = document.querySelector('#test-list')

[...list.children]
  .sort((a,b)=>a.innerText>b.innerText?1:-1)
  .map(node=>list.appendChild(node))
    • nice one! c'est une méthode propre à le faire.
    • Génial! Beaucoup de la façon la plus intelligente pour réorganiser les nœuds
    InformationsquelleAutor ahuigo
  5. 9

    Ma version, espère, sera 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 /* your sort logic, compare x and y here */; })
  .forEach(function (x) { p.appendChild(x); });
    • Que voulez-vous dire /* sort logic */? :/ Le code semble bon, mais ma logique de tri est un peu faible
    • Cela signifie que vous devriez mettre votre logique de tri, ont un coup d'oeil à developer.mozilla.org/en/docs/Web/JavaScript/Reference/... c'est fondamentalement la même, que x et y sont les nœuds DOM.
    InformationsquelleAutor Ebrahim Byagowi
  6. 8

    Si vous êtes déjà à l'aide de jQuery, je vous recommande tinysort : http://tinysort.sjeiti.com/

    $("li").tsort({order:"asc"});
$("li").tsort({order:"desc"});
    • Tinysort est plusieurs fois plus lent que 13 lignes de code, basé sur le tri jquery sélection de résultat et de l'ajoutant arrière - jsperf.com/attr-vs-getattribute/12
    • TinySort utilisé pour être un plugin jQuery mais a été réécrit pour supprimer le jQuery de dépendance. Il est maintenant plus petit et plus rapide
    InformationsquelleAutor Jay
  7. 5

    Voici un ES6 fonction 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));
};

    Voici comment vous pouvez l'utiliser pour trier Inexploité avis des utilisateurs par 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;
  }
});
    InformationsquelleAutor cgenco
  8. 1

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

    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ù l'élément est un tableau des enfants de la même mère. nous retirer en commençant par le dernier et l'ajouter à commencer par la première d'éviter le scintillement dans la partie supérieure qui est probablement à l'écran. j'ai l'habitude de les obtenir mes articles en tableau comme ceci:

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