最简单的DOM节点排序方式？

Question

如果我有这样的列表:

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

根据我的偏好重新安排DOM节点的最简单方法是什么？(这需要在页面加载时自动发生,列表顺序首选项从cookie中获取)

例如

<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

虽然使用JS库可能有一种更简单的方法,但这是一个使用vanilla 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

您可能会发现对DOM节点进行排序效果不佳.一种不同的方法是在你的javascript中有一个数组,它表示将进入DOM节点的数据,对数据进行排序,然后重新生成保存DOM节点的div.

也许你没有那么多节点要排序,所以没关系.我的经验是基于尝试通过操纵DOM来对HTML表进行排序,包括包含数百行和几十列的表.

Answer 3

看到它在行动: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);
            });
        };
    })();

简洁

Answer 4

使用es6语法来求助儿童:

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

[...list.children]
  .sort((a,b)=>a.innerText>b.innerText?1:-1)
  .map(node=>list.appendChild(node))

Answer 5

我的版本,希望对其他人有用:

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

Answer 6

如果您已经在使用jQuery,我建议使用tinysort:http://tinysort.sjeiti.com/

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

Answer 7

这是一个ES6函数，用于对DOM节点进行适当排序：

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

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

这是您如何使用它按分数对未点击的用户评论进行排序的：

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