按列表中的顺序对 html DOM 元素进行排序答案

【问题标题】：Order html DOM elements by order in a list按列表中的顺序对 html DOM 元素进行排序
【发布时间】：2020-06-29 13:12:27
【问题描述】：

如何根据从数据库中获取的顺序更改<div> 及其中元素的顺序？

假设这是我的 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>

这是按顺序排列的列表：

$scope.order = [{name: "A", order: 3}, {name: "B", order: 1}, {name: "C", order: 2}]

我该怎么做才能显示 div B，然后是 div C，最后是 div A？

【问题讨论】：

这里的想法是每个 div 是具有多个输入元素的输入表单，并且每个表单具有不同的数据。用户可以选择要填写的订单，并且该订单存储在数据库中。所以我想在 HTML 中定义所有表单，当我知道正确的顺序时相应地显示它们

标签： javascript jquery html angularjs

【解决方案1】：

您可以使用 flex 非常轻松地更改 HTML 元素的顺序。

let changeOrder = () => {
   const stackOrder = [{name: "A", order: 3}, {name: "B", order: 1}, {name: "C", order: 2}];
       for (let item of stackOrder) {
          $('#' + item.name)[0].style.order = item.order;
       }
};

   

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="container" style="display: flex; flex-direction: column;">
        <div id="A"> Form elements for A</div>
        <div id="B"> Elements that go to B</div>
        <div id="C"> CCC ccAadas</div>
</div>
<input type="button" value="ascending" onclick="changeOrder()">

【讨论】：

谢谢。正是我需要的。

【解决方案2】：

您可以在具有 ng-repeat 功能的 angular js 中使用自定义排序。下面是工作示例。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records | orderBY:'order'">{{x.name}}</h1>

<script>
var app = angular.module("myApp", []);
app.filter('orderBY', function(){
 return function(input, attribute) {
    if (!angular.isObject(input)) return input;

    var array = [];
    for(var objectKey in input) {
        array.push(input[objectKey]);
    }

    array.sort(function(a, b){
        a = parseInt(a[attribute]);
        b = parseInt(b[attribute]);
        return a - b;
    });
    return array;
 }
});
app.controller("myCtrl", function($scope) {
  $scope.records =[{name: "A", order: 3}, {name: "B", order: 1}, {name: "C", order: 2}]
});
</script>

</body>
</html>

【讨论】：

【解决方案3】：

您可以使用lodash 库来订购您的结果，请考虑以下内容。假设 list 是您从数据库返回的内容，请使用 _.orderBy 函数并选择您要排序的字段

const _ = require('lodash') .... const list = [{name: "A", order: 3}, {name: "C", order: 2}, {name: "B", order: 1}] const sorted = _.orderBy(list, 'name')

【讨论】：

【解决方案4】：

首先可以根据订单对数组进行排序

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

此处的完整示例： https://jsfiddle.net/bg7sh2rx/

【讨论】：

感谢您的回答。但是我有 7 个 div，每个 div 都是不同的表单，用户可以在其中输入数据。这个想法是用户可以选择填写哪些订单表格，并将订单存储在数据库中。我在这里理解您的想法，但仍然不知道如何在您提供的示例中使用表单插入我的 div。
那么，这些表格是从哪里来的，它们的外观如何？只需创建一个包含表单的元素数组，然后像这样显示它