Indizierung in .children Liste funktioniert nicht wie erwartet

Könnte jemand bitte erklären, warum für die angegebenen HTMLIndizierung in .children Liste funktioniert nicht wie erwartet

<body> 
    <div id="ustack1"> 
    Block 1: 
    <div id="0"> 0 </div> 
    <div id="1"> 1 </div> 
    <div id="2"> 2 </div> 
    <div id="3"> 3 </div> 
    <div id="4"> 4 </div> 
    <div id="5"> 5 </div> 
    <div id="6"> 6 </div> 
    <div id="7"> 7 </div> 
    <div id="8"> 8 </div> 
    <div id="9"> 9 </div> 
    <div id="10"> 10 </div> 
</div> 

<div id="stagingDiv" style="display:inline-block;"> 
    Block 2: 
</div> 
</body>

und die entsprechende Javascript

var cards = document.getElementById("ustack1").children; 

for(i=0;i<cards.length;i++){ 
    document.getElementById("stagingDiv").appendChild(cards[i]); 
}

(Wie in diesem jsfiddle gesehen: https://jsfiddle.net/73oszkj9/)

dass die ungeraden Elemente übersprungen werden?

Quelle

2016-06-04 dl101

cards ist eine Live-HTMLCollection. Wenn Sie die appendChild ausführen, verschieben Sie den Knoten an eine andere Stelle im DOM, die ihn aus der Sammlung entfernt. Eine Lösung ist nur Karten durchlaufen, bis seine Länge ist Null:

while(cards.length > 0){ 
    document.getElementById("stagingDiv").appendChild(cards[0]); 
}

Hier ist eine aktualisierte Geige: https://jsfiddle.net/Lkvdep52/

Wenn es Ihnen besser fühlen lässt, ist dies ein Fehler, dass viele von uns gemacht haben, bei das eine oder andere Mal ;-) Die Verwendung des Browser-Debuggers ist ein guter Weg, um die zugrunde liegende Ursache für solche Probleme zu verstehen.

Quelle

2016-06-04 19:19:37 jdigital

Wenn Sie reines appendChil verwenden, schneiden Sie das genaue Element von seinem Elternelement. In cloneNode auf eine Kopie dieser Elemente zu machen:

var cards = document.getElementById("ustack1").children; 
for(i=0;i<cards.length;i++){ 
    document.getElementById("stagingDiv").appendChild(cards[i].cloneNode(true)); 
}

Am Ende Sie Kinder von erst Eltern entfernen, wenn nötig.

Quelle

2016-06-04 19:20:35

Indizierung in .children Liste funktioniert nicht wie erwartet

Antwort

Verwandte Themen