Question

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

我需要你的指导。

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

Answer 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/

一些注释：

第一张地图并不是真的需要，但它使排序回调更加简单。
您需要为不同的数据类型（例如日期，字符串）提供不同的比较 - callbac

Answer 2

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

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

Answer 3

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

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

Answer 4

我刚试过这个，它对我来说很好。您将决定事后对阵列的处理方式。：）



$(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()  
});

$(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() });

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

使用jquery或javascript对div数据进行排序

4 个答案: