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