改变元素的顺序

Question

我正在创建一个浮动宽度的网站.用户使用全高清分辨率的屏幕到智能手机上的600px,这似乎是个不错的主意.这带来了一个非常有趣的问题.

当用户使用比最佳分辨率更小的分辨率时,页面获得更高的高度.这意味着更改某些元素(例如某些图像,搜索框或导航)的顺序可能会有用,以使页面更易读,而不需要流氓.

所以我需要能够访问DOM并更改某些页面元素的顺序(交换它们).

假设我有一个列表,需要交换第1项和第2项.

<ul>
  <li>1</li>
  <li>2</li>
</ul>

我找到了一个解决方案,它基于<ul>使用函数附加已经有的元素元素appendChild.然而,文本节点存在问题,并且对于更难的元素结构来说它变得非常复杂,因为需要再次重新构建它.

你有任何改进建议吗？

Answer 1

对于这个简单的情况(交换唯一的两个元素),你可以简单地使用appendChild()(小提琴)

var list = document.querySelector("ul");
list.appendChild(list.firstElementChild);

同一节点不能存在于多个位置; 因此,它从当前位置移除并放置在集合的末尾.

如果你想做更复杂的排序,你可能应该从childNodes(yaf)创建一个数组并且让所有人疯狂:

var list = document.querySelector("ul");
var items = list.querySelectorAll("li");
var sortedList = Array.from(items).sort(function(a, b) {
  var c = a.firstElementChild.textContent,
  d = b.firstElementChild.textContent;
  return c < d ? -1 : c > d ? 1 : 0;
});
for (let item of sortedList) {
  list.appendChild(item);
}

Answer 2

在 2018 年（几年前），仅使用 CSS 就可以实现这一点。您的用例将通过以下方式解决：

ul {
  display: flex;
  flex-direction: column;
}

li:nth-child(2) {
  order: -1;
}

Answer 3

您可以使用 flex 非常轻松地更改 HTML 元素的顺序。

flexorder: 0通过更改订单值，您可以决定元素在列中的显示位置

const ascButton= document.getElementById('asc')
const decButton= document.getElementById('dec')

//callback function for soring in ascending order
const ascending = (a,b)=> a.innerHTML - b.innerHTML

//callback function for soring in descending order
const descending = (a,b)=> b.innerHTML - a.innerHTML

let currentOrder = ascending

ascButton.addEventListener('click', ()=>{
	currentOrder = ascending
  order()
})


decButton.addEventListener('click', ()=>{
	currentOrder = descending
  order()
})


const order  = function(){
	const ordered = [...document.getElementsByClassName('col')].sort(currentOrder)
  ordered.forEach((elem, index)=>{
  	elem.style.order = index
  })
}


order()

.row{
  display: flex;
  flex-direction: column;
}
.col{
  padding: 20px;
  border: 1px solid gray;
  margin: 5px;
  order:3;
}

<div class="row">
  <div class="col "   id="one">1</div>
  <div class="col "   id="two">2</div>
  <div class="col " id="three">3</div>
  <div class="col " id="ten">10</div>
  <div class="col "  id="four">4</div>
  <div class="col "  id="five">5</div>
</div>

<button id="asc">ASC</button>
<button id="dec">DESC</button>

你可以在这里找到一个更复杂的实现https://jsfiddle.net/nijeesh4all/on5rsax8/