如何使用jQuery進行div標籤的客戶端排序？

Question

我想允許Web應用程序的用戶排序查詢的結果，而無需服務器調用。我正在尋找通常類型的點擊標題到按列排序。

但是，我沒有使用實際的表格。我將根據內容操縱div標籤。有沒有一個jQuery方法來促進這一點？

Answer 1

This Tutorial將引導你走向你尋找的道路。它專注於在html表格中對錶格數據進行排序，但是您可以輕鬆地重新使用示例來處理一組div或列表元素，或其他任何內容。

一些指導教導了原始的JavaScript技術，jquery以支持爲特色，所以它是一個很好的指導。例如，它教你如何在sort()方法中使用JavaScript構建。要按字母順序排序？下面是該指南已修改的代碼：

var parent_of_divs = $('#parent-of-divs'), rows; 
rows = parent_of_divs.children('div').get(); 
rows.sort(function(a, b) { 
    var keyA, keyB; 
    keyA = $(a).text().toUpperCase(); 
    keyB = $(b).text().toUpperCase(); 
    if (keyA < keyB) return -1; 
    if (keyA > keyB) return 1; 
    return 0; 
}); 
$.each(rows, function(index, row) { 
    parent_of_divs.append(row); 
}); 

Answer 2

看到這個question有關排序裏的物品。幾乎沒有變化，它也可以適用於你的情況。其中，推薦使用TinySort插件。

Answer 3

你可能想看看使用jQuery的模板庫。您可以創建一個模板，然後將數據對象傳遞給模板進行渲染。當您想要更改排序順序時，您可以更改數據對象，然後「更新（）」您的模板。

Answer 4

有一個確定的例子在這裏：

Example

我發現這是相當不錯的。此外，它是一個輕量級的插件（如果你不想實現你自己的）。對我來說，即使我對這門語言很陌生，代碼也很清晰。