Question

对于每个具有类box[]的对象，我有一个对象数组div和一个.box元素。每个对象都有一个数字属性box[].id，用于标识具有相同div属性的相应id元素。我想创建一个函数来根据相关对象的其他属性对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

我会走向另一个方向。

将box转换为数组。
使用内置的array.sort
清除容器并按排序数组的顺序追加元素。

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);
}

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

3 个答案: