L'ordre des éléments est désordonné après avoir déplacé des éléments deux fois

Question

Je crée un code Javascript afin que les liens du menu débordant se déplacent dans un menu séparé appelé more.

La première fois qu'il est chargé, il fonctionne parfaitement. Cependant, lorsqu'il est exécuté à nouveau, les choses commencent ... traînant

JSfiddle

Snippet ici:

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

 
window.onresize = resize; 
 
resize(); 
 

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

 
    for (var i = 0; i < rChildren.length; i++) { 
 
    var child = rChildren[i]; 
 
    \t 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>

Pourquoi ça ne marche pas?

Answer 1

Je ai réécrit votre fonction de redimensionnement pour éviter les boucles, le plus probablement erreur est dans le levage de vos i, et sauf si vous le faites pour une raison particulière, vous pouvez éviter la variable fragment, trouver ci-dessous le redimensionnement modifié, fonctionne

 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); 
      } 
     }); 
     } 

violon mise à jour: https://jsfiddle.net/e34p0t6w/3/