根据数组内关联对象的属性对 div 元素进行排序

Question

我有一个对象数组box[]，每个对象都有一个div 元素，类.box。每个对象都有一个数字属性box[].id，用于标识具有相同id 属性的对应div 元素。我想创建一个函数来根据相关对象的其他属性对 div 元素进行排序，我认为使用 JavaScript 和 jQuery 会是这样的：

// Call my order function based on property1 for example.    
sortBox("property1");    

function sortBox(property) {
    var order;
    $(".box").each(function (i) {
        // Gets the property on which to sort for each div
        order = box[this.id][property];
        //////////////////////
        //.......????.......//
        //////////////////////
    });
}

这将获取每个div 的属性以进行排序，但我不知道在根据该属性对 div 进行排序并更新 Html 之后该怎么做。请帮忙，这样做的正确方法是什么？有什么想法、例子、建议吗？提前致谢。

Answer 1

您应该查看sort()-函数，例如：

var boxes = $(".box");
// convert boxes to a regular array
boxes.sort(sortFunc);

function sortFunc(div1, div2) {
     // please note that the result is in descending order (see below)
     // if div1 > div2 return -1
     // if div1 < div2 return 1
     // if div1 == div2 return 0
}

然后你可以运行一个循环来插入每个DIV作为父元素的第一个子元素之前的第一个元素

boxes.each(
    function(el) {
        el.parentNode.insertBefore(el, el.parentNode.firstChild);
    });

因为boxes 是按降序排列的，所以您最终会在第一个位置获得“最小”元素。

这可能包含语法错误！

Answer 2

我会去另一个方向。

1. 将box 转换为数组。
2. 使用内置array.sort
3. 清空容器并从已排序的数组中按顺序追加元素。

var boxArray = [];
for (var b in box)
    boxArray.push({id: b, box: b});

boxArray = boxArray.sort(function (a, b) {
    if (a.box.prop1 < b.box.prop1)
        return -1;
    else if (a.box.prop1 > b.box.prop1)
        return 1;
    return 0;
});

Box 数组现已排序，您可以将元素克隆/复制到新容器中。

Answer 3

好的，我想出了这个：

// the prop param is the object property used to sort the array of objects.
function sortBox(prop) {
    box.sort(function (a, b) {
        if (a[prop] < b[prop]) {
            return -1;
        } else if (a[prop] > b[prop]) {
            return 1;
        }
        return 0;
    });
}

然后我可以调用我的sortBox 函数来根据其对象的任何属性对我的box[] 数组进行排序。然后我使用 jQuery empty() 删除现有的 <div> 元素，并使用排序的数组再次创建它们：

$("#boxcontainer").empty();

// the html property specifies the <div> html
for (var i = 0, len = box.length; i < len; i++) {
    $("#boxcontainer").append(box[i].html);
}