请问如何利用Java Script 将如下的LIST以ID的顺序排列?
- text 2
- text 3
- text 1
回答
const target = document.querySelector('#mylist')//父节点
const children = target.children//子节点
Array.prototype.slice.call(children).sort((prev,next)=>prev.id-next.id).forEach(dom=>target.appendChild(dom))
可以用类数组方法排序后都进行一次 appendChild 移位。
const mylist = document.getElementById('mylist');
[ ...mylist.children ]
.sort((a, b) => Number(a.id) - Number(b.id))
.forEach((ele) => {
mylist.appendChild(ele);
});
其中,[ ...foo ] 是 Array.from(foo) 的简写。forEach 方法是按首项到末项的顺序执行的,这在 ECMAScript 标准中有明确定义,可以放心使用。
forEach calls callbackfn once for each element present in the array, in ascending order.
而 appendChild 负责把元素放到被 append 元素的子元素的最后。这样,按顺序依次把每子项放最后,就成按顺序排布的状态了。
但是,不推荐以 id 的方式来设定元素顺序。你可以使用自定义属性 data-* 这一类。
- text 2
- text 3
- text 1
然后使用 dataset 属性在 JavaScript 中访问。参阅 data-* – HTML(超文本标记语言) | MDN。
const mylist = document.getElementById('mylist');
[ ...mylist.children ]
.sort((a, b) => Number(a.dataset.order) - Number(b.dataset.order))
.forEach((ele) => {
mylist.appendChild(ele);
});
另外,直接操作 DOM 的性能花销比较大,更为建议使用 CSS 中 flex 元素 order 属性的特点,改变显示顺序。 参阅 Flex项排序 - CSS(层叠样式表) | MDN。
#mylist {
display: flex;
flex-direction: column;
}
const mylist = document.getElementById('mylist');
[ ...mylist.children ].forEach((ele) => {
ele.style.setProperty('order', ele.dataset.order);
});
emmm
如果用 vue 直接按照 id 做排序然后 for 循环
然后这边的思路,
1.建立 {id, vlaue} 格式的数组 arr
2.如果是接收的数据,做一下排序,这个很基础,就不说了
3.数据通过 createElement 或者 '
4.循环 arr 将输出的 dom 拼接
5.输出到 #mylist