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

我想用不同的方式排序一些DIVS，我很迷茫。我一直在尝试一些东西，但我没有看到如何让它工作。我有以下格式的div数据。我有一个排序选项，如按价格排序，按距离和创建日期等下拉列表。从下拉列表中选择一个选择，divs数据应该被排序和显示相应。示例是我选择按价格排序，然后数据应按排序顺序显示，价格从低到高。使用jquery或javascript对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>

来源

2012-05-15 Sandeep Kumar

也许你应该使用一个表，并提供了许多jQuery插件之一。例如。 http://tablesorter.com/ – Tim

@Tim：是的，我明白，但要改变这种格式和使用表格格式将非常混乱我想我有很多的CSS，我不得不投入太多的时间来更改div格式以表格格式保留数据显示的方式。 –

按价格排序的一个例子：

$('#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/

几点注意事项：

是不是真的需要第一张地图，但它使排序回调要简单得多。
你就需要提供

来源

2012-05-15 14:40:58 Yoshi

你有什么实际上有一个表，所以使用表和现有表分拣机之一。

当你有表格数据时，没有什么使用<table>，这就是你所得到的。

来源

2012-05-15 14:23:11

生成的HTML是呈现的一部分，而分选操作是数据模型的一部分。你应该在代码中分离这两个概念。

就你而言，将数据存储在数组（数据模型）中。当你只想把数据显示给用户时，然后将它放在div或table html中。在布局html之前进行排序。当用户从下拉列表中选择排序选项时，清空#contentContainer，排序数据数组，重新生成新排序数据的html并将其插入#contentContainer。

来源

2012-05-15 14:34:43 Jayesh

我只是测试这对于不同的数据类型的不同比较-callbacs（如日期，字符串），它为我工作得很好。你会决定你之后对阵列做些什么。 :)

 $(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-15 15:13:55 Pagial

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

回答

相关问题