从数组中按 ID 动态排序 div

Posted 2023-05-09

【中文标题】从数组中按 ID 动态排序 div

【英文标题】：Dynamically sort div by ID from array

【发布时间】：2018-05-04 14:51:49

【问题描述】：

我的 angularjs 上有拖放 DIV 网络应用程序。 用户可以对 div 进行排序或选中复选框以添加新的 div，基于 div 位置我获取 DIV ID 并将数组发送到 API，因此当用户再次返回时，一切都像他一样排序。 这是我发送给 API 的内容，没关系

["D", "A", "C"]

问题是当用户回来时，我从 API 数组中获取，我需要对响应数组中的所有内容进行排序。响应与发送数组相同。这是我的 html

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="dragulaBox" 
dragula='"sixth-bag"'>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="A" ng-if="A">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="B" ng-if="B">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="C" ng-if="C">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="D" ng-if="D">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="E" ng-if="E">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="F" ng-if="F">
</div>
</div>

为此，我不使用ng-repeat，因为我有用于添加新 div 的复选框。

<div class="checkbox-inline">
        <input type="checkbox" class="" id="A" value="A" ng-checked="A" ng-
model="A")"><label>A</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="B" value="B" ng-checked="B" ng-
model="B")"><label>B</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="C" value="C" ng-checked="C" ng-
model="C")"><label>C</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="D" value="D" ng-checked="D" ng-
model="D")"><label>D</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="E" value="E" ng-checked="E" ng-
model="E")"><label>E</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="F" value="F" ng-checked="F" ng-
model="F")"><label>F</label>
</div>

我编写代码以显示数组中唯一具有 ID 的 DIV，但我不知道如何像数组一样进行排序。 有人可以帮我对 div 进行排序吗？

谢谢

编辑： 我在下面的答案中尝试使用指令，但这不起作用

app.directive("arrangeDiv", function()
return 
    restrict: "A",
    link: function (scope, element, atts )
        element.sort(function (elem1, elem2) 
            return parseInt(elem1.id) > parseInt(elem2.id);
        ).each(function () 
            var element = $(this);
            element.remove();
            $(element).appendTo("#dragulaBox");
        );

    
  
 )

在parrent div中，我在指令属性中传递数组

  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="dragulaBox" 
  dragula='"sixth-bag"' arrange-div="poredakGrafova"></div>

这是响应 API 的数组 ["B","F","E","D"]

【问题讨论】：

附注，DOM 错误，label 没有开始标签！

哦，对不起，我清理了代码放在这里，所以我把它删错了。我解决了这个问题

jsfiddle.net/hibbard_eu/C2heg 会帮助你

@KhatamNaayak 我不明白如何按照 ID 在我的数组中进行排序。谢谢

所以你想filter divs 然后sort?

【参考方案1】：

jquery div 排序简单：--

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="res">
  <div id="3">text 3</div>
  <div id="4">text 4</div>
  <div id="1">text 1</div>
  <div id="2">text 2</div>
</div>
<script>
$("#res div").sort(function (elem1, elem2) 
    return parseInt(elem1.id) > parseInt(elem2.id);
).each(function () 
    var element = $(this);
    element.remove();
    $(element).appendTo("#res");
);

</script>

【讨论】：

是的，如果您不使用 ng-repeat，则无法使用 angular 对其进行排序。但是您可以将此解决方案包装在指令中，将其应用于父对象并将您的数组作为属性值传递。这将是更有棱角的方式。 my-sort-divs="array"

@kindzoku 你能帮我把它包装成指令吗？谢谢

【参考方案2】：

Angular js 是这样排序的：--

var myApp = angular.module('myApp', []);

myApp.filter('orderObjectBy', 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;
 
);

myApp.controller('controller', ['$scope', function ($scope) 
    $scope.orderByAttribute = '';
    
    $scope.testData = 
        123: name: "Test B", position: "2",
        456: name: "Test A", position: "1",
        789: name: "Test C", position: "3"
	;
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
    <div ng-controller="controller">
        <button ng-click="orderByAttribute = 'position'">Order by Position</button>
        <button ng-click="orderByAttribute = ''">Use order in object</button>
        
        <ul>
            <li ng-repeat="item in testData | orderObjectBy:orderByAttribute">
                item.name (Pos: item.position)
            </li>
        </ul>
    </div>
</div>

【讨论】：

thnx，这是一个非常好的解决方案，但我需要在没有 ng-repeat 的情况下使用它。我按照你的建议制定指令......但没有工作......我把代码放在这里

【参考方案3】：

在 Angular js 中不使用 ng-repeat：--

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController">
  item  
     <div class="reason-content">
           
           item[0].id <br>
           item[1].id <br>
           item[2].id <br>
           item[3].id <br>
           
           item[0].name <br>
           item[1].name <br>
           item[2].name <br>
           item[3].name <br>
           
          </div>
</div>
<script>
angular.module('myApp', [])

.controller('MainController', function ($scope, filterFilter) 

  $scope.foobar = [
    "id": 15, "name": "bar1",
    "id": 25, "name": "bar2",
    "id": 215, "name": "bar3",
    "id": 7415, "name": "bar4"
  ];
    $scope.item = filterFilter($scope.foobar);
  
);
</script>

【讨论】：

这里的filterFilter是什么？

这些是angularjs的预定义函数