Javascript Jquery通过排序值移动元素

我对元素的排序和排列有问题。首先，我需要按某个值（例如price、date、name）对元素进行排序，然后根据该值应用页面上元素的布局。我发现了很多插件和排序函数，但它们只是改变了排列下元素的值。我不知道如何排序元素，然后根据排序值改变它们的位置

例如，我有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>

---

我认为这种插入排序方法确实会改变对象的位置：


不过，我认为您必须根据自己的需要对其进行调整，因为您希望在
p
中对价格进行排序，而不使用插件，这应该可以：

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

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

每个都不需要<代码>$（“li”）.sort（comparePrice）.appendTo（“#page wrap ul”）

应该可以正常工作。

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

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