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

我想允许Web应用程序的用户对查询结果进行排序而无需服务器调用。我正在寻找按列单击标题的常规类型。

但是，我不使用实际的表。我将根据内容来操作div标签。是否有jQuery方法可简化此操作？

最佳答案

This Tutorial将引导您找到所需的路径。它着重于对html表中的表格数据进行排序，但是您可以轻松地将示例重新调整为与一组div或list元素或其他元素一起使用。

其中一些指南教授原始的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);
});