javascript - 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>

如您所见，我想通过最低价格来更改元素的整体排列，而不仅仅是值(value)。

如果有些大师知道如何通过 jquery 或 javascript 做到这一点，我将非常感谢他。

感谢回复

Answer 1

不使用插件，这应该可以工作:

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

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