![的顺序]( "的顺序")
本文介绍了颠倒所有元素的顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试过使用
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>
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>
这篇关于颠倒所有元素的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！