使用jquery或javascript对div数据进行排序 [英] sorting of div data using jquery or javascript

问题描述

我试图以不同的方式对一些DIVS进行分类，但我很迷茫.我一直在尝试一些东西，但是我不知道如何使它工作.我有以下格式的div数据.我有一个下拉列表，其中包含按价格，距离和创建日期等排序的排序选项.从下拉列表中选择一个选择素后，应相应地对divs数据进行排序和分配.例如，我选择按价格排序，然后数据应该按照从低到高的价格从高到低的顺序显示.

I'm trying to sort some DIVS in different ways and I'm quite lost. I've been trying some stuff but I don't see how to get it to work. I have div data in following format. I have a dropdown with sorting options like sort by price, by distance and by creation date etc.. On selecting an optin from dropdown the divs data should be sorted and dispalyed accordingly. Example is I choose sort by price then data should be displayed in sorted order as with price starting from lower to higher.

我需要您的指导.

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

推荐答案

按价格排序的示例:

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

一些注意事项:

• 实际上并不需要第一个地图，但是它使排序回调更加简单.
• 您需要针对不同的数据类型(例如日期，字符串)提供不同的比较调用条件

这篇关于使用jquery或javascript对div数据进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！