Javascript 改变元素的顺序

Changing the order of elements

提问by Rusty Horse

I am creating a website of floating width. The users use screens from full HD resolution to some 600px on smart phones it seems a pretty good idea. This brings up a very interesting problem.

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

When user uses a smaller resolution than is an optimum the page gets a lot more height. This means it might be useful to change order of some elements (for example some image, search box or navigation) to make the page more readable without much need of scrooling.

当用户使用比最佳分辨率更小的分辨率时，页面的高度会更高。这意味着更改某些元素（例如某些图像、搜索框或导航）的顺序可能很有用，以使页面更具可读性而无需太多滚动。

So I need to be able to access DOM and change order of some page elements (swap them).

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

Lets say I have an list and need to swap item 1 and 2.

假设我有一个列表，需要交换项目 1 和 2。

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

I found a solution based on appending already items elements to <ul>by using function appendChild. However there is a problem with text nodes and it gets really complicated to do it for more difficult element structure, since the need of recreating it whole again.

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

Do you have any suggestion to improve it?

你有什么改进的建议吗？

回答by canon

For this simple case (swapping the only two elements), you can just use appendChild():

对于这个简单的情况（交换仅有的两个元素），您可以使用appendChild()：

(() => {
  const list = document.querySelector("ul");
  list.appendChild(list.firstElementChild);
})();

<ul>
  <li>List-item #1</li>
  <li>List-item #2</li>
</ul>

The same node cannot exist in multiple positions; so, it's removed from its current position and placed at the end of the collection.

同一个节点不能存在多个位置；因此，它从当前位置移除并放置在集合的末尾。

If you want to do more complicated sorting, you probably ought to create an array from the childNodes and get all crazy:

如果你想做更复杂的排序，你可能应该从 childNodes 创建一个数组并疯狂：

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

<ul>
  <li>Dogs</li>
  <li>Snakes</li>
  <li>Cats</li>
  <li>Bugs</li>
</ul>

回答by Nijeesh Joshy

You can use flex to change the order of the HTML elements very easily.

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

flex order: 0by changing the order value you can decide where in the column the element appears

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>

You can find a much more complex implementation here https://jsfiddle.net/nijeesh4all/on5rsax8/

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

回答by daniels

In 2018 (and already a few years ago) this is possible with just CSS. Your use case would be solved by something like this:

在 2018 年（并且已经在几年前），这可以仅通过 CSS 实现。您的用例将通过以下方式解决：

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

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

回答by Emir Akayd?n

wouldn't swapping innerHTML also work?

交换innerHTML 也行吗？

var myList = document.getElementsByTagName("ul")[0]; 
temp = myList.getElementsByTagName("li")[0].innerHTML;
myList.getElementsByTagName("li")[0].innerHTML = myList.getElementsByTagName("li")[1].innerHTML;
myList.getElementsByTagName("li")[1].innerHTML = temp;