我有一个带有可重新排列的div的HTML列表，它们可以上下移动，一旦重新排列，我需要用HTML元素的相同顺序更改数组。

HTML:

     <div id="List">
      <div id="listUnit2" class="row">
       <div class="text-center" style="width:50px;">
        <p>Orange</p>
       </div>
      </div>

      <div id="listUnit1" class="row">
       <div class="text-center" style="width:50px;">
        <p>Pear</p>
       </div>
      </div>

      <div id="listUnit0" class="row">
       <div class="text-center" style="width:50px;">
        <p>Apple</p>
       </div>
      </div>
     </div>

数组:

     <div id="List">
      <div id="listUnit2" class="row">
       <div class="text-center" style="width:50px;">
        <p>Orange</p>
       </div>
      </div>

      <div id="listUnit1" class="row">
       <div class="text-center" style="width:50px;">
        <p>Pear</p>
       </div>
      </div>

      <div id="listUnit0" class="row">
       <div class="text-center" style="width:50px;">
        <p>Apple</p>
       </div>
      </div>
     </div>

如何使用该值作为引用获得此结果？

     <div id="List">
      <div id="listUnit2" class="row">
       <div class="text-center" style="width:50px;">
        <p>Orange</p>
       </div>
      </div>

      <div id="listUnit1" class="row">
       <div class="text-center" style="width:50px;">
        <p>Pear</p>
       </div>
      </div>

      <div id="listUnit0" class="row">
       <div class="text-center" style="width:50px;">
        <p>Apple</p>
       </div>
      </div>
     </div>

我尝试了:

     <div id="List">
      <div id="listUnit2" class="row">
       <div class="text-center" style="width:50px;">
        <p>Orange</p>
       </div>
      </div>

      <div id="listUnit1" class="row">
       <div class="text-center" style="width:50px;">
        <p>Pear</p>
       </div>
      </div>

      <div id="listUnit0" class="row">
       <div class="text-center" style="width:50px;">
        <p>Apple</p>
       </div>
      </div>
     </div>

对象的顺序会发生变化，但在重新排列后与HTML不一样。

---

顺晟科技：

每次更改都可以这样做。

我必须修复无效的标记

您可以在UI上获取列表，然后根据它对列表进行排序。

     <div id="List">
      <div id="listUnit2" class="row">
       <div class="text-center" style="width:50px;">
        <p>Orange</p>
       </div>
      </div>

      <div id="listUnit1" class="row">
       <div class="text-center" style="width:50px;">
        <p>Pear</p>
       </div>
      </div>

      <div id="listUnit0" class="row">
       <div class="text-center" style="width:50px;">
        <p>Apple</p>
       </div>
      </div>
     </div>

我更新了您的代码并在控制台中打印结果。您可以检查它:

1-您的html代码错误，请修改结构。

2-您有一个='list'的元素，而不是=list的元素。您需要该div的子级，因此修改您的选择器:

     <div id="List">
      <div id="listUnit2" class="row">
       <div class="text-center" style="width:50px;">
        <p>Orange</p>
       </div>
      </div>

      <div id="listUnit1" class="row">
       <div class="text-center" style="width:50px;">
        <p>Pear</p>
       </div>
      </div>

      <div id="listUnit0" class="row">
       <div class="text-center" style="width:50px;">
        <p>Apple</p>
       </div>
      </div>
     </div>

3--获取元素的文本，使用:

     <div id="List">
      <div id="listUnit2" class="row">
       <div class="text-center" style="width:50px;">
        <p>Orange</p>
       </div>
      </div>

      <div id="listUnit1" class="row">
       <div class="text-center" style="width:50px;">
        <p>Pear</p>
       </div>
      </div>

      <div id="listUnit0" class="row">
       <div class="text-center" style="width:50px;">
        <p>Apple</p>
       </div>
      </div>
     </div>