最简单的方法来sortingDOM节点？
如果我有这样的列表：
<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>
尽pipe使用JS Library可能会有一个更简单的方法，但这里有一个使用vanilla js的工作解决scheme。
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]); }
您可能会发现sortingDOM节点的性能不佳。 一个不同的方法是在你的javascript中有一个数组，表示将进入DOM节点的数据，sorting数据，然后重新生成包含DOM节点的div。
也许你没有那么多的节点来sorting，所以没关系。 我的经验是基于尝试通过操纵DOM对HTML表进行sorting，包括具有数百行和几十列的表。
看到它的行动： 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); }); }; })();
简洁
如果你已经使用jQuery，我build议tinysort： http ://tinysort.sjeiti.com/
$("li").tsort({order:"asc"}); $("li").tsort({order:"desc"});
我的版本，希望对其他人有用：
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); });
没有太多的分析，如果这给桌子带来了新的东西，我通常使用这个：
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); }
其中item是同一父级的子级数组。 我们删除从最后一个开始，并追加从第一个开始，以避免闪烁在顶部可能是在屏幕上。 我通常得到我的物品数组是这样的：
forEachSnapshot(document.evaluate(..., 6, null), function(n, i){ items[i] = n; });
这里有一个ES6函数来sortingDOM节点：
const sortChildren = ({ container, childSelector, getScore }) => { const items = [...container.querySelectorAll(childSelector)]; items .sort((a, b) => getScore(b) - getScore(a)) .forEach(item => container.appendChild(item)); };
以下是您将如何使用它按照分数sorting未分配的用户评论 ：
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; } });
