Javascript 在列表中按顺序排列html DOM元素

如何根据从数据库获取的顺序更改

及其元素的顺序

假设这是我的HTML：

<div id="container">
    <div id="A"> Form elements for A</div>
    <div id="B"> Elements that go to B</div>
    <div id="C"> CCC ccAadas</div>
</div>

---

如何显示div B、div C和last div A？

您可以在angular js中使用自定义排序和ng repeat功能。下面是一个工作示例

{{x.name}
var-app=angular.module（“myApp”，[]）；
app.filter（'orderBY'，function（）{
返回函数（输入、属性）{
如果（！angular.isObject（输入））返回输入；
var数组=[]；
for（输入中的var objectKey）{
push（输入[objectKey]）；
}
array.sort（函数（a，b）{
a=parseInt（a[属性]）；
b=parseInt（b[属性]）；
返回a-b；
});
返回数组；
}
});
app.controller（“myCtrl”，函数（$scope）{
$scope.records=[{name:“A”，顺序：3}，{name:“B”，顺序：1}，{name:“C”，顺序：2}]
});
<代码> > p>您可以使用<代码> LoaSuth/Cux>库来命令您的结果，请考虑下面的内容。假设从数据库返回的是
list
，请使用
.orderBy
函数并选择要排序的字段


常量=需要（'lodash'））
....
const list=[{name:“A”，顺序：3}，{name:“C”，顺序：2}，{name:“B”，顺序：1}]
const sorted=uu.orderBy（list，'name'）
首先，您可以根据顺序对数组进行排序

order.sort((a, b) => {
    return a.order - b.order;
});

完成后，在数组中循环，在每次迭代中创建一个div并将其附加到主容器中

for (let i = 0; i < order.length; i++) {
  let div = document.createElement("div");
  div.id = order[i].name;
  div.innerText = `This is ${order[i].name} div`; // for displaying test purposes
  document.getElementById('main').appendChild(div);
}

for（设i=0；i

完整示例如下：
您可以使用flex非常轻松地更改HTML元素的顺序


let changeOrder=（）=>{
const stackOrder=[{name:“A”，order:3}，{name:“B”，order:1}，{name:“C”，order:2}]；
对于（stackOrder的let项目）{
$（'#'+item.name）[0].style.order=item.order；
}
};

表单元素
到B的元素
CCCCAADAS
谢谢您的回答。但我有7个div，每个div都是用户可以输入数据的不同形式。其思想是用户可以选择填写哪些订单，并将订单存储在数据库中。我理解您的想法，但仍然不知道如何在您提供的示例中插入带有表单的div。那么，表单从何而来，它们看起来如何？只需创建一个包含表单的元素数组，然后像这样显示。这里的想法是，每个div都是具有多个输入元素的输入表单，每个表单都具有不同的数据。用户可以选择填充顺序，该顺序存储在数据库中。所以我想用HTML来定义所有的表单，当我知道正确的顺序时，就会相应地显示它们。谢谢。正是我需要的。
for (let i = 0; i < order.length; i++) {
  let div = document.createElement("div");
  div.id = order[i].name;
  div.innerText = `This is ${order[i].name} div`; // for displaying test purposes
  document.getElementById('main').appendChild(div);
}