Javascript 按指定条件对页面上的项目进行排序

我想能够排序的内容在我的网页上的不同标准（例如：按价格和名称）

我希望结果是这样的：

我使用的是静态html，项目列表没有以任何方式被调用到页面，我不希望使用任何类型的数据库

我将使用的代码与此类似：

<div class="product">
  <div class="name">
    <p>Product 1</p>
  </div>
  <div class="price">
    <p>$1.00</p>
  </div>
</div>

产品1

一美元

尝试按

price

$('div.price').map(function () {
   return {val: parseFloat($(this).text(), 10), el: this.parentNode};
}).sort(function (a, b) {
   return a.val - b.val;
}).map(function () {
   return this.el;
}).appendTo('body');

演示

经过一些

修改

后，您可以通过

名称对其进行
排序
也可以

$('div.name').map(function () {
   return {val: $.trim($(this).text()), el: this.parentNode};
}).sort(function (a, b) {
   return a.val > b.val;
}).map(function () {
   return this.el;
}).appendTo('body');

演示
请将您的代码发布到目前为止。如果页面是静态的，包含固定数量的产品，您可以将产品信息存储在产品对象数组中，根据需要对其进行排序，然后按索引打印。非常感谢，这正是我想要的。