如何通过 JavaScript 重新排序元素答案

【问题标题】：How to reorder elements by JavaScript如何通过 JavaScript 重新排序元素
【发布时间】：2022-07-16 22:32:07
【问题描述】：

假设我有 6 个 div，它们当前的顺序是 1 到 6，如何重新排列它们以使其变为 612345？

我尝试将它们存储到一个变量中并使用getElementsByClassName，然后使用slice 方法和insertAdjacentElement 方法但它无法工作......

const btn = document.querySelector('.reorder');
const elm = document.getElementsByClassName('items');
const lastIndexOfElm = elm.length -1

function reorder() {
  let newElm = [...elm].slice(0, lastIndexOfElm);

  elm[lastIndexOfElm].insertAdjacentElement('afterend', newElm);
}

btn.addEventListener('click', reorder)

<button class="reorder">Reorder</button>
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>

【问题讨论】：

标签： javascript

【解决方案1】：

如果您想将“.items”的最后一项移动到第一项，此代码可能会对您有所帮助。

const btn = document.querySelector('.reorder');
const elm = document.getElementsByClassName('items');
const lastIndexOfElm = elm.length -1

function reorder() {
  let lastElm = elm[lastIndexOfElm];
  elm[lastIndexOfElm].remove();
  
  document.body.insertBefore(lastElm, elm[0]);
}

btn.addEventListener('click', reorder)

<button class="reorder">Reorder</button>
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>

【讨论】：

【解决方案2】：

它可能适用于您的情况，也可能不适用，但另一种可能性是将它们全部放在一个 flexbox 中并使用 CSS order 属性来更改排序：

<div style="display: flex;">
  <div style="order: -1">1</div> <!-- first -->
  <div style="order: 10">2</div> <!-- last -->
  <div>3</div>
  <div>4</div>
</div>

那么在Javascript中你只需要调整CSS样式的order属性就可以动态改变排序。

【讨论】：