jquery 按字母分类

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。按字母分类通常指的是将一组数据按照字母顺序进行排序和分组。

类型

按字母分类可以分为两种主要类型：

排序：将数据按照字母顺序进行排序。
分组：将数据按照首字母进行分组。

应用场景

按字母分类常用于以下场景：

通讯录
字典
搜索结果排序
数据列表展示

示例代码

以下是一个使用 jQuery 实现按字母排序和分组的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按字母分类</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
        <li>Orange</li>
        <li>Pear</li>
    </ul>

    <script>
        $(document).ready(function() {
            // 按字母排序
            var items = $('#list li').get().sort(function(a, b) {
                return $(a).text().localeCompare($(b).text());
            });

            // 清空原有列表
            $('#list').empty();

            // 将排序后的元素重新添加到列表中
            $.each(items, function(index, item) {
                $('#list').append(item);
            });

            // 按首字母分组
            var groups = {};
            $.each(items, function(index, item) {
                var firstLetter = $(item).text().charAt(0).toUpperCase();
                if (!groups[firstLetter]) {
                    groups[firstLetter] = [];
                }
                groups[firstLetter].push(item);
            });

            // 清空原有列表
            $('#list').empty();

            // 将分组后的元素添加到列表中
            $.each(groups, function(letter, items) {
                $('#list').append('<li>' + letter + '</li>');
                $.each(items, function(index, item) {
                    $('#list').append(item);
                });
            });
        });
    </script>
</body>
</html>