排序DOM节点的最简单方法?
发布于 2021-02-02 17:09:37
如果我有这样的列表:
<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>
关注者
0
被浏览
139
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]); }
推荐阅读
-
用Python开发简单GUI的最简单方法
2021-01-29 关注 0 浏览78 1答案
-
分析 PHP 脚本的最简单方法
2022-05-26 关注 0 浏览21 1答案
-
剖析PHP脚本的最简单方法
2021-02-02 关注 0 浏览77 1答案
-
解析JSON响应的最简单方法
2021-02-02 关注 0 浏览79 1答案
-
PyQT线程化的最简单方法
2021-01-29 关注 0 浏览88 1答案
-
用Java查询XML的最简单方法
2021-01-30 关注 0 浏览98 1答案
-
删除双向递归关系的最简单方法?
2021-01-31 关注 0 浏览100 1答案
-
检测javascript中按键的最简单方法
2021-02-02 关注 0 浏览73 1答案
-
读取和写入文件的最简单方法
2021-02-02 关注 0 浏览124 1答案
-
反转 ArrayList 的最简单方法是什么?
2022-04-11 关注 0 浏览58 1答案