基於數組內的關聯對象的屬性排列div元素

對於這些對象中的每個對象，我都有一個對象陣列box[]和div，它們的類別爲.box。每個對象都有一個數字屬性box[].id，用於標識具有相同id屬性的相應div元素。我想創建一個功能基於其相關對象的其他屬性訂購div元素，我認爲這將是這樣使用JavaScript和jQuery：基於數組內的關聯對象的屬性排列div元素

// 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。請幫忙，這樣做的正確方法是什麼？任何想法，例子，建議？提前致謝。

來源

2011-01-14 VerizonW

好吧，我想出了這個：

// 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[]數組進行排序。然後，我刪除現有<div>元素使用jQuery空的（），並與排序的數組再次創建它們：

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

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

來源

2011-01-17 02:38:37 VerizonW

我會去另一個方向。

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

盒陣列現在可以正確排序，你可以複製/複製元素融入到一個新的容器。

來源

2011-01-14 17:24:49

其實盒【]已經對象的數組，所以也許我並不需要創建一個新的數組ANDS只需對現有的一個進行排序 – VerizonW 2011-01-15 17:14:35

你應該看看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 
}

然後你就可以運行一個循環父

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

的第一個孩子之前插入每個DIV作爲第一要素因爲boxes按降序排序，所以最終的結果是第一個位置的「最小」元素。

這可能包含語法錯誤！

來源

2011-01-14 17:26:02 sjngm

我打算髮布一些使用.sort（）函數的東西，但是你打敗了我。順便說一下，語法看起來很好。 – Fibericon 2011-01-14 17:29:23

但是通過這樣做，它不會被關聯對象的屬性按該內容排序，對嗎？ – VerizonW 2011-01-15 17:16:59

基於數組內的關聯對象的屬性排列div元素

回答

相關問題