如何<div>根據(jù)從數(shù)據(jù)庫(kù)獲取的順序更改其中的順序和元素？假設(shè)這是我的 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貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超10個(gè)贊
您可以使用 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陽(yáng)
TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊
您可以使用lodash庫(kù)來(lái)排序結(jié)果，請(qǐng)考慮以下內(nèi)容。假設(shè)list您從數(shù)據(jù)庫(kù)返回的內(nèi)容，請(qǐng)使用該_.orderBy函數(shù)并選擇您想要排序的字段
const _ = require('lodash')
....
const list = [{name: "A", order: 3}, {name: "C", order: 2}, {name: "B", order: 1}]
const sorted = _.orderBy(list, 'name')
catspeake
TA貢獻(xiàn)1111條經(jīng)驗(yàn) 獲得超0個(gè)贊
首先，您可以根據(jù)順序?qū)?shù)組進(jìn)行排序
order.sort((a, b) => {
return a.order - b.order;
});
完成后，循環(huán)遍歷數(shù)組，在每次迭代期間創(chuàng)建一個(gè) 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貢獻(xiàn)1887條經(jīng)驗(yàn) 獲得超5個(gè)贊
您可以在 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 關(guān)注
- 183 瀏覽
添加回答
舉報(bào)
0/150
提交
取消