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/

いくつかのメモ:

  • 最初のマップは実際には必要ありませんが、並べ替えのコールバックがはるかに簡単になります。
  • 異なるデータ型 (日付、文字列など) に対して異なる比較コールバックを提供する必要があります。
于 2012-05-15T14:40:58.497 に答える
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 に答える
0

生成された HTML はプレゼンテーションの一部ですが、並べ替え操作はデータモデルの一部です。コードでは、これら 2 つの概念を分離する必要があります。

あなたの場合、データを配列（データモデル）に保存します。ユーザーのみにデータを表示する場合は、div またはテーブル html に配置します。HTMLをレイアウトする前にソートを行います。ユーザーがドロップダウンから並べ替えオプションを選択すると、 が空になり#contentContainer、データの配列が並べ替えられ、新しく並べ替えられたデータの html が再生成され、 に挿入され#contentContainerます。

于 2012-05-15T14:34:43.727 に答える
0

そこにあるのは実際にはTABLEなので、テーブルと既存のテーブルソーターの1つを使用してください。

表形式のデータがある場合は、使用に苦労することは何もありません<table>。それがあなたが持っているものです。

于 2012-05-15T14:23:11.147 に答える