改變元素的順序

Question

我正在創建一個浮動寬度的網站。 用戶在智能手機上使用從全高清分辨率到大約 600 像素的屏幕，這似乎是一個不錯的主意。 這帶來了一個非常有趣的問題。

當用戶使用比最佳分辨率更小的分辨率時，頁面的高度會更高。 這意味着更改某些元素（例如某些圖像、搜索框或導航）的順序可能很有用，以使頁面更具可讀性而無需太多滾動。

所以我需要能夠訪問 DOM 並更改某些頁面元素的順序（交換它們）。

假設我有一個列表，需要交換項目 1 和 2。

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

我找到了一個基於使用函數appendChild將已有的 items 元素附加到<ul>的解決方案。 然而，文本節點存在一個問題，對於更困難的元素結構，它變得非常復雜，因為需要再次重新創建它。

你有什么改進的建議嗎？

Answer 1

對於這個簡單的情況（交換僅有的兩個元素），您可以只使用appendChild() ：

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

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

同一個節點不能存在多個位置； 因此，它從當前位置移除並放置在集合的末尾。

如果你想做更復雜的排序，你可能應該從 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>

Answer 2

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

flex order: 0通過更改 order 值，您可以決定元素出現在列中的位置

 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/

Answer 3

在 2018 年（並且已經在幾年前），這可以通過 CSS 實現。 您的用例將通過以下方式解決：

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

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

Answer 4

交換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;