Question

我尝试使用

CSS：

flex-direction: column-reverse;

和

Javascript：

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

在保持div内联但不起作用的同时反转div内span的顺序

<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>元素
使用Spread运算符将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即可实现上述目标。

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

颠倒所有元素的顺序

4 个答案: