Die Funktion getElementsByTagName gibt nicht die richtige Reihenfolge einer ul zurück, die ziehbare Listenelemente hat.

Question

Ich habe eine ungeordnete Liste und die li-Elemente können gezogen werden und die Reihenfolge kann geändert werden. Das funktioniert einwandfrei Das Problem passiert, ich verwende diese Codezeile: var items = ul.getElementsByTagName ("li"); Es gibt HtmlCollection zurück, aber in der ursprünglichen Reihenfolge und nicht in der aktuellen Reihenfolge, in die der Benutzer die Listenelemente verschoben hat.

Ich habe einen Screenshot mit Chrome in der Reihenfolge erfasst, in der sich die Liste befindet, nachdem ich einige der li's verschoben habe. Beachten Sie, wie es noch so angeordnet ist, wie es ursprünglich gezeigt wurde?

Aber wenn ich den [0 ... 99] Tag ich die richtige Reihenfolge zu sehen erweitern. (Sehen Sie, wie die oberen paar verschoben wurden? Das ist die Reihenfolge muss ich durchlaufen.)

Und hier ist der HTML-Text.

<ul id="first_" class="sortable_unstyled" data-sortable-id="0" aria-dropeffect="move"> 
 
    
 
    <li draggable="true" role="option" aria-grabbed="false" style="list-style-type: none;" id="first_li_0" > 
 
    <div> 
 
     <input id="first_sectionnumber_0" type="number" /> 
 
    </div> 
 
    </li> 
 
    <li draggable="true" role="option" aria-grabbed="false" style="list-style-type: none;" id="first_li_1" > 
 
    <div> 
 
     <input id="first_sectionnumber_1" type="number" /> 
 
    </div> 
 
    </li> 
 
    // There is more than a 100 more lis after these 
 

 
    </ul>

Die Javascript-Funktion ist:

 function RenumberQuestionIndexes(ulObj) { 
 
      var count = 0; 
 
      var ul = document.getElementById(ulObj); 
 
      var items = ul.getElementsByTagName("li"); 
 
      var indexinput = ulObj + "order_index_"; 
 

 
      for (var i = 0; i < items.length; ++i) 
 
      { 
 
       if(items[i].style.display.indexOf('none') >= 0) 
 
       { 
 
        document.getElementById(indexinput + i.toString()).value = -1; 
 
       } 
 
       else 
 
       { 
 
        document.getElementById(indexinput + i.toString()).value = count; 
 

 
        count++; 
 
       } 
 
      } 
 
    
 
     }

So wie kann ich durch diese HtmlCollection Artikel Liste iterieren und die tatsächliche Bestellung erhalten, die aktuell angezeigt wird auf dem Bildschirm?

Answer 1

Gut nach viel Kopfschlagen. Ich habe festgestellt, dass es funktioniert, wenn ich meine var-Objekte in ein Array verwandle.

Also änderte ich den Code dazu:

 function RenumberQuestionIndexes(ulObj) { 
 
      var count = 0; 
 
      var ul = document.getElementById(ulObj); 
 
      var items = ul.getElementsByTagName("li"); 
 
      var indexinput = ulObj + "order_index_"; 
 

 
      var a = Array.from(items); 
 

 

 
      for (var i = 0; i < a.length; ++i) 
 
      { 
 
       if(a[i].style.display.indexOf('none') >= 0) 
 
       { 
 
        document.getElementById(indexinput + i.toString()).value = -1; 
 
       } 
 
       else 
 
       { 
 
        document.getElementById(indexinput + i.toString()).value = count; 
 

 
        count++; 
 
       } 
 
      } 
 
     }

Das neue Array die korrekte aktuelle Reihenfolge der Listenelemente hat. Ich würde gerne wissen, wie Array.from() diese Magie tut.