首页> 疑难解答

DocumentFragment正在丢失部分内容

withpy 2021-06-19

简介所以我基本上只是尝试将元素从一个节点移动到另一个节点。我创建了一个片段,然后将它添加到我的子元素中。 const fragment = document.createDocumentFragment();让......

所以我基本上只是尝试将元素从一个节点移动到另一个节点。我创建了一个片段,然后将它添加到我的子元素中。

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>
1
投票

你在迭代它时改变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>

相关文章