所以我基本上只是尝试将元素从一个节点移动到另一个节点。 我创建了一个片段,然后将我的子元素附加到它。
const fragment = document.createDocumentFragment();
let sortedElements = [...document.querySelectorAll('.product')].sort((a,b) => b.dataset.blockSize - a.dataset.blockSize ); //Select elements
sortedElements.forEach((e) => {
console.log(e) //My 4 children displayed
fragment.appendChild(e)
});
console.log(fragment.children); //Only Two children in it
fragment.childNodes.forEach((el) => {
document.querySelector("#appendThere").appendChild(el);
})
<div class="product" data-object-size="4">Product 1</div>
<div class="product" data-object-size="2">Product 2</div>
<div class="product" data-object-size="1">Product 3</div>
<div class="product" data-object-size="1">Product 4</div>
<div id="appendThere"></div>
我是否误解了片段的工作原理?
奇怪的是,它正在处理片段...... 甚至部分地在我的电脑上工作,但它变得越来越陌生。
我认为在打印变量和探索变量之间存在变化。
最佳答案
您在迭代 fragment.childNodes
时改变它,这会导致意外行为。您只需要附加 fragment
而不是附加它的每个子项。
例如(固定元素数据属性以对应于您示例中的排序 js):
const fragment = document.createDocumentFragment();
const sorted = [...document.querySelectorAll('.product')].sort((a,b) => {
return b.dataset.blockSize - a.dataset.blockSize;
});
sorted.forEach((elem) => {
fragment.appendChild(elem);
});
document.querySelector('#destination').appendChild(fragment);
<div class="product" data-block-size="3">Product 2</div>
<div class="product" data-block-size="1">Product 3</div>
<div class="product" data-block-size="4">Product 1</div>
<div class="product" data-block-size="1">Product 4</div>
<div id="destination"></div>
或者,不使用文档片段(如果您使用的元素数量有限,性能差异可能不会很大)。
const destination = document.querySelector('#destination');
const sorted = [...document.querySelectorAll('.product')].sort((a,b) => {
return b.dataset.blockSize - a.dataset.blockSize;
});
sorted.forEach((elem) => {
destination.appendChild(elem);
});
<div class="product" data-block-size="3">Product 2</div>
<div class="product" data-block-size="1">Product 3</div>
<div class="product" data-block-size="4">Product 1</div>
<div class="product" data-block-size="1">Product 4</div>
<div id="destination"></div>
关于javascript - DocumentFragment 丢失了我的部分内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55283174/