javascript - DocumentFragment 正在丢失我的部分内容
问题描述
所以我基本上只是尝试将元素从一个节点移动到另一个节点。我创建了一个片段,然后将我的子元素附加到它上面。
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>
推荐阅读
- cakephp - cakePHP updateAll() 的用法:可以知道 $condition 是否满足?
- c - 用于数组的 for 循环的替代实现
- apache-kafka - 将 REST 代理连接到 Confluent Cloud 尝试连接到 Zookeeper
- java - 如何仅在Android中的特定时间段启用按钮?
- slider - 通过点击设置 SwiftUI 滑块的值
- python-3.x - 在给定范围内查找方程的所有根
- javascript - 如何访问减速器中数组对象中的特定项目
- postman - Postman 访问存储在数据库 leveldb 中的结果
- javafx - 线程“JavaFX 应用程序线程”java.lang.illegalArgumentException 中的异常:Grid hgap=10.0
- javascript - 为什么 KaiOS 模拟器 (B2G) 中的相机不工作?