Question

我尝试了许多不同的教程和线程来实现我试图做的事情，但是没有帮助。这是我所拥有的以及我要实现的目标：

<div id="column1" class="columns">
   <div id="5" class="dragbox">&nbsp;</div>
   <div id="3" class="dragbox">&nbsp;</div>
   <div id="1" class="dragbox">&nbsp;</div>
</div>
<div id="column2" class="columns">
   <div id="2" class="dragbox">&nbsp;</div>
   <div id="4" class="dragbox">&nbsp;</div>
</div>

The sort order is stored in an array:
order1 = [column1:{3,5,1,4}];
order2 = [column2:{2}];

Using the sort order arrays, I would like to achieve the following result:
<div id="column1" class="columns">
   <div id="3" class="dragbox">&nbsp;</div>
   <div id="5" class="dragbox">&nbsp;</div>
   <div id="1" class="dragbox">&nbsp;</div>
   <div id="4" class="dragbox">&nbsp;</div>
</div>
<div id="column2" class="columns">
   <div id="2" class="dragbox">&nbsp;</div>
</div>

Answer 1

您是否可以擦除div的内容并使用javascript从头开始重新创建它？

我认为最简单的方法是使用空div（column1和column2），并且每次数组中有新数据时，目标都是擦除旧div的内容并用数组内容重新创建。

例如，您的基本HTML就是这样

  <body>
    <div id="column1" class="columns">
    </div>

    <div id="column2" class="columns">
    </div>
  </body>

这是您的js（使用jQuery，因为您将其发布为标签）：

  var column1 = [3,5,1,4];
  var htmlContent = '';
  for(var i = 0; i < column1.length; i++){
   htmlContent += '<div id="'+column1[i]+'" class="dragbox">&nbsp;</div>';
  }
  $("#column1").html(htmlContent );

并对column2做相同的操作。

您还可以在此之前进行循环

  for(var i = 0; i < column1.length; i++){
   htmlContent += '<div id="'+column1[i]+'" class="dragbox">&nbsp;</div>';
  }

如果要填充的列很多。这样，您可以动态创建列的HTML。

仅当您不需要列的div内容时，此解决方案才是正确的，因为$("#column1").html(htmlContent); 将"#column1"的实际内容替换为htmlContent

根据阵列

1 个答案: