javascript/jQueryを使用して内部div要素の内容/値に基づいてdiv要素をソートするにはどうすればよいですか？

Question

私はそれぞれ、ページ内のdivのX量を持つdivの項目は、単一の製品を表し、次のようになります。

<div class="productContainer"> 
<li> 
    <img src="my-product-image.jpg"></a> 
    <div class="productInfo"> 
     <h4> 
      <!-- SORT ALL DIVS BASED ON A TAG CONTENT --> 
      <a class="productTitleForSorting" href="product-page-link">NAME</a><br> 
     </h4> 
     <div class="product-price">    
      <span id="lowestPrice">PRICE: 
      <!-- OR SORT ALL DIVS BY PRODUCT PRICE SPAN CONTENT --> 
      <span class="productPriceForSorting">$XX.XX</span></span> 
     </div> 
    </div>    
</li> 
</div> 

その後、私は、私はdivを並べ替えたいのですが、そこから選択リスト/ドロップダウンリストを持っています価格またはアルファベット順。

たとえば、1つのページに上記のような10個のdiv（10個の商品）があるとします。私は、タイトル（a.productTitleForSortingコンテンツ）、または選択リストの変更時の価格（span.productPriceForSorting）で並べ替えることができるようにしたいと思います。

どのように私はJavascript/jQueryでこれを達成することができますか？クライアント側で実行する必要があります。

私はdatasortプラグインを使用しようとしましたが、それで運がないので、新しいアイデアや提案を探しています。ありがとう！

Answer 1

domの並べ替えや並べ替えはお勧めしません。それがクライアント側で行われる必要がある場合は、javascript配列を格納し、それをソートします。たとえば：

var items = [{price:3,name:"something"}, {price:10,name:"somethingelse"}]; 

は今、これをソートし、DOMに追加するJavaScript sort functionsを使用しています。これは、domオブジェクトを移動するよりもはるかに効率的です。 this sorting pluginのようなものを使用して

Answer 2

、あなただけのようなコンパレータ機能必要があります：あなたはネイティブのソート機能を使用できますが、事は、あなたが比較メカニズムを提供しなければならないということである

function sortByTag(a, b) { 
    $(a).find('a').first().text() > $(b).find('a').first().text(); 
} 

Answer 3

を：

function sortByPrice(a,b){ 
    return $(a).find('.productPriceForSorting').text() > $(b).find('.productPriceForSorting').text(); 
} 

を使用すると、要素を並べ替えることができます。

$('.productContainer').sort(sortByPrice); 

Afte toghetherそれをすべてを置く

function reorderEl(el){ 
    var container = $('#productList'); 
    container.html(''); 
    el.each(function(){ 
     $(this).appendTo(container); 
    }); 
} 

：Rあなたが製品容器を空にしてから、新しい順にソートされた要素を追加する必要がありますので、あなたは、HTMLを更新する必要があり、要素をソートしてきました

reorderEl($('.productContainer').sort(sortByPrice)); 

ここに実例があります：http://jsfiddle.net/gion_13/jKJc3/