javascript - 根据数组内关联对象的属性对 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 是降序排列的，所以“最小”元素位于第一个位置。

这可能包含语法错误!