javascript - 如何使用 jQuery 对 div 标签进行客户端排序？

Question

我希望允许网络应用程序的用户在不调用服务器的情况下对查询结果进行排序。我正在寻找通常类型的单击标题以基于列进行排序的类型。

但是，我没有使用实际的表格。我将根据内容操作 div 标签。有没有 jQuery 方法可以促进这一点？

Answer 1

This Tutorial将引导您走上您所寻求的道路。它专注于对 html 表格中的表格数据进行排序，但您可以轻松地重新调整示例的用途以处理一组 div 或列表元素或其他内容。

一些指南教授原始 JavaScript 技术，并加入 jQuery 来提供支持，因此这是一个很好的指南。例如，它教您如何使用 JavaScript 的内置 sort() 方法。想要按字母顺序排序？以下是该指南的修改片段:

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);
});