javascript - 列表的倒序

Question

div > div {
  text-align: center;
  color: white;
  background: black;
  border: 1px solid white;
}

div.row {
  display: flex;
  flex-direction: row-reverse;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-4">1</div>
  <div class="col-4">2</div>
  <div class="col-4">3</div>
  <div class="col-4">4</div>
  <div class="col-4">5</div>
  <div class="col-4">6</div>
  <div class="col-4">7</div>
</div>

我想反转这个数字列表成为

7  6  5
4  3  2
1

我试过用

div.row {
  display: flex;
  flex-direction: row-reverse
}

但没有像我想要的那样工作

是否可以仅使用 css 来做到这一点？

Answer 1

我知道您要求的是纯 CSS 解决方案，但因为使用 Javascript 很容易实现，所以我也想添加该解决方案。也可能对 future 可以选择 Javascript 的读者有所帮助。

另外，在这个时间点上，我认为仅使用 CSS 无法做到这一点。使用 Javascript 的额外好处是元素的源顺序与其视觉顺序保持一致，这对可访问性有很大帮助。

function reverseChildren(el) {
  [...el.children].reverse().forEach(child => el.appendChild(child));
}

div > div {
  text-align: center;
  color: white;
  background: black;
  border: 1px solid white;
}

div.row {
  display: flex;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row" id="row">
  <div class="col-4">1</div>
  <div class="col-4">2</div>
  <div class="col-4">3</div>
  <div class="col-4">4</div>
  <div class="col-4">5</div>
  <div class="col-4">6</div>
  <div class="col-4">7</div>
</div>

<button type="button" onclick="reverseChildren(document.getElementById('row'))">Reverse order</button>

那么让我们试试这对 1000 个 div 的表现如何:

const row = document.querySelector('.row');
const fragment = new DocumentFragment();

for (let i = 1; i<=1000; i++) {
  const div = document.createElement('div');
  div.className = "col-4";
  div.textContent = i;
  fragment.appendChild(div);
}

row.appendChild(fragment);

function reverseChildren(el) {
  const fragment = new DocumentFragment();
  [...el.children].reverse().forEach(child => {
    el.removeChild(child);
    fragment.appendChild(child);
  })
  el.appendChild(fragment);
}

div > div {
  text-align: center;
  color: white;
  background: black;
  border: 1px solid white;
}

div.row {
  display: flex;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<button type="button" onclick="reverseChildren(document.getElementById('row'))">Reverse order</button>
<div class="row" id="row"></div>
<button type="button" onclick="reverseChildren(document.getElementById('row'))">Reverse order</button>

在第二个示例中，我修改了 reverseChildren 函数以使用 DocumentFragment，这有助于提高性能。