如何用Java Script将HTML重新排序

Question

请问如何利用Java Script 将如下的LIST以ID的顺序排列？

<ul id="mylist">
    <li id="2">text 2</li>
    <li id="3">text 3</li>
    <li id="1">text 1</li>
</ul>

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

Answer 2

可以用类数组方法排序后都进行一次 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-* 这一类。

<ul id="mylist">
  <li data-order="2">text 2</li>
  <li data-order="3">text 3</li>
  <li data-order="1">text 1</li>
</ul>

然后使用 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);
});

Answer 3

emmm
如果用 vue 直接按照 id 做排序然后 for 循环

然后这边的思路，
1.建立 {id, vlaue} 格式的数组 arr
2.如果是接收的数据，做一下排序，这个很基础，就不说了
3.数据通过 createElement 或者 '<div></div>' 建立虚拟dom
4.循环 arr 将输出的 dom 拼接
5.输出到 #mylist