如何<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？
4 回答
慕哥6287543
TA貢獻1831條經驗 獲得超10個贊
您可以使用 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()">
BIG陽
TA貢獻1859條經驗 獲得超6個贊
您可以使用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')
catspeake
TA貢獻1111條經驗 獲得超0個贊
首先，您可以根據順序對數組進行排序
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/
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
您可以在 Angular JS 中使用具有 ng-repeat 功能的自定義排序。下面是工作示例。
<!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>
- 4 回答
- 0 關注
- 192 瀏覽
添加回答
舉報
0/150
提交
取消