JavaScript - 部門をソートする方法

Question

私は以下の形式で家の情報のリストを持っています。

<div id="content"> 
    <div class="listing"> 
     <div class="photo"><a href="#"><img src="img.jpg" width="200"></a></div> 
     <div class="info"> 
      <p class="address"><a href="#">321 Main St<br>Beverly Hills, CA 90210</a></p> 
      <div class="attr">Price</div> 
      <div class="val price">$325,000</div> 
      <div class="attr">Sq. Ft.</div> 
      <div class="val">2,600</div> 
      <div class="attr">Built</div> 
      <div class="val">1988</div> 
      <div class="attr">Bedrooms</div> 
      <div class="val">3</div> 
      <div class="attr">Bathrooms</div> 
      <div class="val">2.5</div> 
     </div> 
    </div> 
    <div class="listing">{ANOTHER HOME LISTING...}</div> 
    <div class="listing">{ANOTHER HOME LISTING...}</div> 
    <div class="listing">{ANOTHER HOME LISTING...}</div> 
</div>  

JavaScriptを使用して、上記のような家のリストをソートするにはどうすればよいですか？

例を挙げると、私は本質的に次のデモをしたいと思います（ただしTABLEは使用しません）。

http://sam-i-am.com/work/sandbox/dojo0.9/samiam/sortableList.html

Answer 1

私はあなたはそれが最初にレンダリングされた後に、ユーザの要求に応じてデータを訴えるしたいと仮定しています。私は通常、AJAX経由でこのサーバー側を行います。つまり、異なるソートを持つ同じデータセットに対してGETリクエストを実行します。これは、データをページングするときに必要です。ソート後、表示されるレコードは以前に表示されたレコードとは完全に異なる可能性があるためです。

ページングされていない小さなデータセットがあり、クライアントサイドをソートしたい場合は、データをjavascript配列としてレンダリングし、javascriptを使用してDIVを作成します。次に、ユーザーがソートしたいときは、配列を使用して、JavaScriptのレンダリング関数を再度呼び出して、新しくソートされた順序でデータを取得します。

Answer 2

私はOrbManに同意します。リストを配列に格納します。あなたは、単純に配列を並べ替えることができます。代わりに、空のJavascriptを使ってDOM内ですべてを行うことができます。

関連のないメモでは、すべてにdivを使用する必要がありますか？順序付けられたリストを使用した場合は、意味論的に優れていて、書いたJavascriptを読みやすく保守しやすくなります。特別に分類されたdivの束を参照する代わりに、（分類された）ul/ol内でliを参照することができます。