按列表中的顺序对 html DOM 元素进行排序
Posted
技术标签:
【中文标题】按列表中的顺序对 html DOM 元素进行排序【英文标题】:Order html DOM elements by order in a list 【发布时间】: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 中定义所有表单,当我知道正确的顺序时相应地显示它们 【参考方案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。 那么,这些表格是从哪里来的,它们的外观如何?只需创建一个包含表单的元素数组,然后像这样显示它以上是关于按列表中的顺序对 html DOM 元素进行排序的主要内容,如果未能解决你的问题,请参考以下文章