颠倒所有元素的顺序

Question

我试过用

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

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

​

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

​

Answer 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就可以实现上述目标。