Question

我有几种产品。每个都有一个特定的价格，我想要一个按钮按价格对它们进行排序。

我的网站上的产品是这样的：

<div class="product" id="pr_1">Some Content</div>
<div class="product" id="pr_2">Some Content</div>
<div class="product" id="pr_3">Some Content</div>
...

我将价格从PHP解析为JavaScript，因此我有一个包含所有价格和产品ID的JavaScript对象：

{12:1, 20:2, 7:3}

目前关键是价格，价值是产品的ID。

我想让它们重新排序而不重新加载。所以只有JavaScript / jQuery。我更喜欢普通的JavaScript。

有没有办法根据产品价格更改div的订单？

Answer 1

您可以将价格HTML放在div中：

<div id="price_list">

</div>

然后，如果您可以将价格放在这样的列表中：

prices = [
  {id:1, price:12},
  {id:2, price:20},
  {id:3, price:7}
];

您将能够使用以下代码进行排序和显示：

prices.sort(function(a, b) {
    return parseFloat(a.price) - parseFloat(b.price);
});
// Your array is sorted

$('#price_list').html('');
prices.forEach(function(entry) {
    $('#price_list').append('<div class="product" id="pr_'+entry.id+'">'+entry.price+' dollars</div>');
});

我希望你没事。

如果您想要JSFiddle

Answer 2

按照您的规范进行排序可以像Fiddler一样进行（注意：列表是数组，而不是对象）。然而，jedema的答案是要走的路。

`$(document).ready(function() {
  var list = [[1,19], [2,10], [3,5], [4, 22]];

  list.sort(function(a,b) {
      return a[1] - b[1];
  });

  for(i=0;i<list.length;i++){
    var $product = $(".parent").find(".product[data-id=" + list[i][0]+"]");
    $(".newparent").append($product);
  }

});`

按价格排序div

2 个答案: