两次移动元素后元素顺序混乱

Question

我正在创建一些 Javascript 代码，以便溢出的菜单链接移动到一个名为 more 的单独菜单中。

第一次加载时，它运行良好。然而，当它再次运行时，事情开始洗牌......

JSfiddle

此处摘录：

var tele = document.getElementById('teleporter'),
  	rec = document.getElementById('receiver');

window.onresize = resize;
resize();

function resize() {
  var rChildren = rec.children,
   	 numW = 0;

  for (var i = 0; i < rChildren.length; i++) {
    var child = rChildren[i];
   	var fragment = document.createDocumentFragment().appendChild(child);
    child.outHTML = '';
    tele.appendChild(fragment);
  }
  
  var teleW = tele.offsetWidth,
     tChildren = tele.children;

  for (var i = 0; i < tChildren.length; i++) {
    var child = tChildren[i];
    numW += child.offsetWidth;

    if (numW > teleW) {
      var fragment = document.createDocumentFragment().appendChild(child);
      child.outHTML = '';
      rec.appendChild(fragment);
      i--;
    }
  }
  
}

#teleporter {
  height: 20px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
}

li {
  float: left;
  padding: 0 10px;
  box-sizing: border-box;
  list-style: none;
}

<ul id="teleporter">
  <li>List item 0</li>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  <li>List item 6</li>
  <li>List item 7</li>
  <li>List item 8</li>
  <li>List item 9</li>
  <li>List item 10</li>
  <li>List item 11</li>
  <li>List item 12</li>
  <li>List item 13</li>
</ul>
<div>More:
  <ul id="receiver"></ul>
</div>

为什么它不起作用？

Answer 1

我重写了你的 resize 函数以避免 for 循环，很可能错误是在你的 i 的提升中，除非你出于特定原因这样做，否则你可以避免 fragment 变量，在修改后的 resize 下方找到，工作

      function resize() {
        const rChildren = rec.children;
        let numW = 0;

        [...rChildren].forEach(item => {
          item.outHTML = '';
          tele.appendChild(item);
        })  

        const teleW = tele.offsetWidth,
          tChildren = tele.children;

        [...tChildren].forEach(item => {
          numW += item.offsetWidth;

          if (numW > teleW) {
            item.outHTML = '';
            rec.appendChild(item);
          }
        });
      }

更新的小提琴： https://jsfiddle.net/e34p0t6w/3/