関数getElementsByTagNameが、ドラッグ可能なリストアイテムを持つulの正しい順序を返していない

Question

私は順序付けられていないリストを持ち、li要素をドラッグして順序を変更できます。これは正常に動作します。このコード行を使用すると問題が発生します。 var items = ul.getElementsByTagName（ "li"）; HtmlCollectionを返しますが、ユーザーがリスト項目を移動した順序は元の順序ではなくなります。

私はいくつかの司会者を移動した後に、リストが入っている順番でChromeでスクリーンショットをキャプチャしました。それが最初に表示されたようにまだどのように注文されているかに注目してください。

しかし、私は適切な順序を参照してください[0 ... 99]タグを展開します。 （上位のいくつかは、これは私が反復処理する必要があるためですか移動されたかを参照してください。）

そして、ここでは、HTMLテキストです。

<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>

javascript関数は次のとおりです。

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

それでは、どのように私は、そのHtmlCollection項目リストを反復処理することができ、現在表示されている実際の順序を取得画面上？

Answer 1

よく頭が叩かれた後。私はvarアイテムを配列に変換すると動作することがわかりました。

だから私はこれにコードを変更：

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

を新しい配列は、リスト項目の現在の正しい順序を持っています。 Array.from（）がどのようにその魔法をしているか知りたいです。