Jquery通过对值进行排序来移动元素

Jquery move elements by sorting value

本文关键字：排序 移动 元素 Jquery      更新时间：2023-09-26

我对元素的排序和排列有问题。首先，我需要根据一些值（例如价格、日期、名称）对元素进行排序，然后根据这个值在页面上应用元素的布局。我发现了很多插件和排序函数，但它们只是改变了排列下元素的值。我不知道如何排序元素，然后根据排序值改变它们的位置。

例如，我有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实现这一点，我将非常感谢他。

感谢您回答

如果不使用插件，这应该可以工作：

function comparePrice(a, b) {
  return (parseInt($(a).find(".price").text(), 10) - parseInt($(b).find(".price").text(), 10));
}
$("li").sort(comparePrice).appendTo("#page-wrap ul");

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

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

不过，我认为你必须根据自己的需求进行调整，因为你想在p中对价格进行排序。

相关文章：