jquery通過排序值移動元素

Question

我對元素的排序和排列有問題。首先，我需要按某個值對元素進行排序（例如價格，日期，名稱），然後根據此值在頁面上應用元素的佈局。我發現了很多插件和排序功能，但它們只是改變了排列下元素的值。我不知道如何排序元素，然後根據排序值更改它們的位置。

，比如我有HTML結構：

<div id="page-wrap> 
    <ul> 
    <li class="first"> 
    <p class="price">2500</p> 
    </li> 
    <li class="second"> 
    <p class="price">4300</p> 
    </li> 
    <li class="third"> 
    <p class="price">1800</p> 
    </li> 
    <li class="fourth"> 
    <p class="price">3871</p> 
    </li> 
    </ul> </div> 

而且結果應該是（例如排序和最低價移動元素）：

<div id="page-wrap"> 

    <ul> 
    <li class="third"> 
    <p class="price">1800</p> 
    </li> 
    <li class="fisrt"> 
    <p class="price">2500</p> 
    </li> 
    <li class="fourth"> 
    <p class="price">3871</p> 
    </li> 
    <li class="second"> 
    <p class="price">4300</p> 
    </li> 

    </ul></div> 

正如你可以看到我想要改變整個以最低的價格安排要素，而不僅僅是價值。

如果一些大師知道如何通過jquery或javascript做到這一點，我將非常感謝他。

謝謝回答

Answer 1

我覺得這個插入排序方法不改變你的對象的位置：

http://www.tomgreenaway.com/2009/01/jquery-list-insertion-sort-plugin/

我認爲你必須雖然將其調整到自己的需要，因爲你想對p內的價格進行排序。

Answer 2

而不使用插件，這應該工作：

function comparePrice(a, b) { 
    return (parseInt($(a).find(".price").text(), 10) - parseInt($(b).find(".price").text(), 10)); 
} 

$("li").sort(comparePrice).appendTo("#page-wrap ul");