我有以下 HTML：
<div class="wrapper">
<div class="item" id="item-1">
</div>
<div class="item" id="item-2">
</div>
<div class="item" id="item-3">
</div>
</div>
在 javascript 中，我目前正在對陣列的結果應用過濾器和排序：
results = Object.keys(list).filter(.....);
results = results.sort((a, b) => (....) ? 1 : -1);
// After the results have been filtered & sorted, hide all HTML elements:
document.querySelectorAll('.item').forEach(i => i.classList.add('d-none'));
// And then proceed to show only the results that have been filtered & sorted:
results.forEach(index =>
{
let id = list[index].id;
let item = document.getElementById('item-' id);
item.classList.remove('d-none');
});
這很好用。問題是現在我需要根據results陣列移動 HTML 元素，特別是id欄位。
A) 預期輸出：陣列 ids [2, 1]
<div class="wrapper">
<div class="item" id="item-2">
</div>
<div class="item" id="item-1">
</div>
<div class="item d-none" id="item-3">
</div>
</div>
B) 預期輸出：陣列 ID [2]
<div class="wrapper">
<div class="item" id="item-2">
</div>
<div class="item d-none" id="item-1">
</div>
<div class="item d-none" id="item-3">
</div>
</div>
uj5u.com熱心網友回復：
您可以使用prepend函式將元素移動到頂部。
在下面的例子中，我只實作了關于移動元素的邏輯，我沒有保護不存在的元素。您應該添加有關過濾等的邏輯并防止可能出現的錯誤。
function sortDivs() {
let list = [2, 1];
let mainDiv = document.querySelectorAll('.wrapper')[0];
list.reverse().forEach(n => mainDiv.prepend(document.getElementById('item-' n)));
}.item {
border: black solid;
}<div class="wrapper">
<div class="item" id="item-1">
item-1
</div>
<div class="item" id="item-2">
item-2
</div>
<div class="item" id="item-3">
item-3
</div>
</div>
<br>
<button onClick="sortDivs()"> sort DIVs</button>uj5u.com熱心網友回復：
一種方法是
- 迭代結果 id 并從 dom 中獲取相應的物件
- 獲取所有 d-done 元素并組合兩個串列
- 轉換為 html 并重置包裝器的 innerHTML
let results = [2,1]
let wrapper = document.getElementById('wrapper-id')
wrapper.innerHTML = results.map(id => document.querySelector('#item-' id))
.concat([...document.querySelectorAll('.d-none')])
.map(elem => elem.outerHTML)
.join('')
<div class="wrapper" id="wrapper-id">
<div class="item" id="item-1">
item-1
</div>
<div class="item" id="item-2">
item-2
</div>
<div class="item d-none" id="item-3">
item-3
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339345.html
標籤：javascript
上一篇：組合物件陣列中父鍵相同的子項