0

我试图以不同的方式对一些 DIVS 进行排序，但我很迷茫。我一直在尝试一些东西，但我不知道如何让它工作。我有以下格式的 div 数据。我有一个带有排序选项的下拉列表，例如按价格、距离和创建日期等排序。从下拉列表中选择一个选项时，应该对 div 数据进行相应的排序和显示。示例是我选择按价格排序，然后数据应按排序顺序显示，因为价格从低到高开始。

我需要你的指导。

<div id="contentContainer">
  <div id="content">
      <div>
        <div class="price">120</div>
        <div class="dateDiv">2012-05-09 20:39:38.0</div>
        <div class="distance">20 mile</div>
      </div>

      <div>
        <div class="price">123</div>
        <div class="dateDiv">2012-05-10 20:39:38.0</div>
        <div class="distance">30 mile</div>
      </div>

      <div>
        <div class="price">100</div>
        <div class="dateDiv">2012-05-11 20:39:38.0</div>
        <div class="distance">50 mile</div>
      </div>

      <div>
        <div class="price">124</div>
        <div class="dateDiv">2012-05-12 20:39:38.0</div>
        <div class="distance">60 mile</div>
       </div>
   </div>
</div>
4

4 回答 4

1

按价格排序的示例：

$('#content div.price').map(function () {
  // map sort-value and relevant dom-element for easier handling
  return {val: parseFloat($(this).text(), 10), el: this.parentNode};
}).sort(function (a, b) {
  // a simple asc-sort
  return a.val - b.val;
}).map(function () {
  // reduce the list to the actual dom-element
  return this.el;
}).appendTo('#content'); // < inject into parent node

演示：http: //jsfiddle.net/QmVsD/1/

几点注意事项：

  • 第一张地图并不是真正需要的，但它使排序回调更简单。
  • 您需要为不同的数据类型（例如日期、字符串）提供不同的 compare-callbacs
于 2012-05-15T14:40:58.497 回答
0

你所拥有的实际上是一个表，所以使用一个表和一个现有的表排序器。

当您拥有表格数据时，使用它没有任何<table>问题，这就是您所拥有的。

于 2012-05-15T14:23:11.147 回答
0

生成的 HTML 是表示的一部分，而排序操作是数据模型的一部分。您应该在代码中将这两个概念分开。

在您的情况下，将数据存储在数组（数据模型）中。当您只想向用户显示数据时，请将其放在 div 或 table html 中。在布局 html 之前进行排序。当用户从下拉列表中选择排序选项时，清空#contentContainer，对数据数组进行排序，重新生成新排序数据的 html 并将其插入到#contentContainer.

于 2012-05-15T14:34:43.727 回答
0

我刚刚对此进行了测试，它对我来说效果很好。之后，您将决定如何处理阵列。:)

$(document).ready(function () {
var priceItems = $('.price');
var arr = new Array();
for (var i = 0; i < priceItems.length;i++) {
var tempInt = priceItems[i].innerHTML;
tempInt = parseInt(tempInt);
arr.push(tempInt);
}
arr.sort()  
});

您现在需要的只是使用您的阵列。

于 2012-05-15T15:13:55.787 回答