Упорядочить html элементов DOM по порядку в списке - PullRequest
Новая
       1

Упорядочить html элементов DOM по порядку в списке

0 голосов
/ 18 марта 2020

Как изменить порядок <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 ]

0 голосов
/ 18 марта 2020

Вы можете использовать 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()">
0 голосов
/ 18 марта 2020

Вы можете использовать библиотеку 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')

0 голосов
/ 18 марта 2020

Сначала вы можете начать с сортировки массива по порядку 

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

Как только это будет сделано, l oop через массив, где на каждой итерации вы создаете div и добавляете его в main контейнер. 

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/

0 голосов
/ 18 марта 2020

Вы можете использовать пользовательский порядок в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...