颠倒所有元素的顺序答案

【问题标题】：reversing the order of all elements颠倒所有元素的顺序
【发布时间】：2019-03-26 16:13:27
【问题描述】：

我尝试过使用

CSS：

flex-direction: column-reverse;

和

Javascript：

var reversed = document.getElementsByTagName('span').reverse();
document.getElementsByTagName('div').innerHTML = reversed;

反转 div 内跨度的顺序，同时保持它们内联但不起作用

<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">
  <span class="col-3">1</span>
  <span class="col-3">2</span>
  <span class="col-3">3</span>
  <span class="col-3">4</span>
  <span class="col-3">5</span>
  <span class="col-3">6</span>
  <span class="col-3">7</span>
  <span class="col-3">8</span>
  <span class="col-3">9</span>
  <span class="col-3">10</span>
</div>

预期结果是

10    9    8    7
6     5    4    3
2     1

【问题讨论】：

这实际上是一个与下面每个人在下面回答的问题不同的问题 - 因此，根据您的原始问题，您有多个没有意义的答案。在提交之前，请确保您的问题准确无误并且正是您打算提出的问题。
突然改变你的问题以使其在没有 flex 的情况下工作并不是那么有用。人们已经回答了你的问题。让它看起来像引导程序或在他们的答案中使用网格系统超出了您的问题范围。
已问及已回答，问题应回复至stackoverflow.com/revisions/55361689/1
当被问到这个问题时，我认为功能不会改变，但后来我发现了不同之处，所以不得不用实际的代码 css 修复它，很抱歉造成混乱

标签： javascript html css twitter-bootstrap

【解决方案1】：

您可以使用flex-direction: row-reverse 和justify-content: flex-end

div {
  display: flex;
  flex:1;
  justify-content: flex-end;
  flex-direction: row-reverse;
}

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</div>

带JS

function change(){
  let spans = document.querySelectorAll('.row > span')
  let div = document.querySelector('.row');
  ([...spans]).reverse().forEach(e=>{
    div.appendChild(e)
  })
}

<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 onClick='change()'>Reverse</button>
<div class="row">
  <span class="col-3">1</span>
  <span class="col-3">2</span>
  <span class="col-3">3</span>
  <span class="col-3">4</span>
  <span class="col-3">5</span>
  <span class="col-3">6</span>
  <span class="col-3">7</span>
  <span class="col-3">8</span>
  <span class="col-3">9</span>
  <span class="col-3">10</span>
</div>

【讨论】：

@JoeDoe 也添加了一个带有 JS 的方法
有没有一种使用javascript批量实现的方法，而不是一个一个附加的跨度超过1000跨度的速度？

【解决方案2】：

您可以通过以下步骤做到这一点：

使用querySelectorAll() 获取所有<span> 元素
使用扩展运算符将querySelectorAll 的结果转换为Array
在上面使用Array.prototype.reverse()
使用querySelector() 获取<div> 并使用appendChild 而不是innerHTML

let div = document.querySelector('div')
let spans =  [...document.querySelectorAll('span')].reverse().forEach(elm => {
  div.appendChild(elm);
})

div {
  display: flex;
}

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</div>

【讨论】：

【解决方案3】：

您可以在此处使用flex-direction: row-reverse 和justify-content 将项目向左对齐而不是向右对齐，当您使用row-reverse 作为值时会发生这种情况。

div {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</div>

另外，我不确定您是否正在寻找 JS 解决方案，但我认为您不需要它，因为您可以仅使用 flex 实现上述目标。

【讨论】：

【解决方案4】：

使用column-reverse，您可以有效地将它们转换为块元素，因此虽然它会改变顺序，但它也会将span 元素放在另一个之下。

我建议改为尝试row-reverse - 这将使它们全部内联，同时为您提供所需的订单。然后为确保它保留在页面左侧，请使用justify-content:flex-end;，如下所示：

div {
  display: flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
}

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</div>

【讨论】：