排序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库可能有一种更简单的方法，但这是使用香草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]);

}