JQuery的 - 排序DOM對象從

Question

我有一個包含對DOM元素的引用幾個對象：

var liObjs = [new Li($el1, price), new Li($el2, price), new Li($el3, price)] 

// Li Model 
function Li($element, price){ 
var self = this; 

self.price = price; 
self.$element = $element; 
} 

// My DOM Looks like this: 
<ul> 
<li>Price: $3</li> 
<li>Price: $1</li> 
<li>Price: $2</li> 
</ul> 

而且，我需要他們的價格基礎上liObjs的對象進行排序。

我已經設法根據每個對象的價格屬性對liObjs進行排序，但我無法渲染它們以便爲我的生活。請幫忙。

注意： <li>s已經在DOM中創建，但我需要在頁面加載時對它們重新排序。

Answer 1

非jQuery的方式

// Remove existing elements from the parent node. 
var parent = liObjs[0].$element.parentNode; 

while (parent.hasChildNodes()) { 
    parent.removeChild(parent.lastChild); 
} 

// Assuming you have already sorted the array 
// you can simply loop through them and add them 

liObjs.forEach(function(item) { 
    parent.appendChild(item.$element); 
}); 

jQuery的方式

$(liObjs[0].$element) 
    .parent() 
    .empty() 
    .append(liObjs.map(function(item) { 
    return item.$element; 
    })); 

這裏是展示它是如何工作一個CodePen。
http://codepen.io/jessegavin/pen/NpavgZ?editors=1010