如何使用javascript/jQuery根據內部div元素內容/值對div元素進行排序？

我有一個頁面的div X量，每格的項表示單一的產品，看起來像這樣：如何使用javascript/jQuery根據內部div元素內容/值對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排序選擇列表/下拉列表按價格或按字母順序排列。

例如，假設我有10個div（10個產品），就像上面的一個頁面一樣。我希望能夠通過標題（a.productTitleForSorting內容）或價格（span.productPriceForSorting）對選擇列表更改進行排序。

任何想法如何我可以去完成這與Javascript/jQuery？它必須在客戶端完成。

我試過使用datasort插件，但沒有運氣，因此尋找新的想法和建議。謝謝！

來源

2011-07-21 IntricatePixels

我不會推薦對dom進行排序和重新排序。如果必須在客戶端完成，則存儲javascript數組並對其進行排序。例如：

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

現在使用JavaScript sort functions對此進行排序並追加到dom中。這比移動dom對象效率更高。

來源

2011-07-21 14:32:45

+1同意...... – sje397

使用類似this sorting plugin，你只需要比較的功能，如：

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

來源

2011-07-21 14:34:42 sje397

您可以使用本機排序功能，但問題是，你必須提供一個比較機制：

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

那麼你可以使用下列元素對你的元素進行分類：

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

Afte R您已經分類的元素，你需要更新HTML，所以你應該清空產品容器，然後追加新順序排序的元素：

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

把它們放在toghether：

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

這裏是一個工作示例：http://jsfiddle.net/gion_13/jKJc3/

來源

2011-07-21 14:48:56

你能找到jquery'sort'函數文檔的鏈接嗎？我讀它是在1.3.2中添加的，但無法在網站上找到它。 – sje397

我正在使用原生JavaScript排序功能。它不是jQuery。這裏是一個例子：'[3,1,6,2,7,234,3,8] .sort（function（a，b）{return a> b;}）;' –

對此，欣賞它，特別是在jsFiddle上放置示例！ – IntricatePixels

如何使用javascript/jQuery根據內部div元素內容/值對div元素進行排序？

回答

相關問題