颠倒所有元素的顺序 [英] reversing the order of all elements

问题描述

我试过使用

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>

预期结果是

10 9 8 76 5 4 32 1

解决方案

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

div {显示:弹性；弹性:1;justify-content: flex-end;flex-direction: 行反向；}

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

<块引用>

用JS

function change(){let spans = document.querySelectorAll('.row > span')让 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()'>反转</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>

i have tried using

CSS:

flex-direction: column-reverse;

and

Javascript:

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

to reverse the order of the span inside the div while keeping them inline but does not work

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

intended result is

10    9    8    7
6     5    4    3
2     1

解决方案

You can use flex-direction: row-reverse and 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>

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

这篇关于颠倒所有元素的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！