如果您想使用 jQuery 来按首字母分组元素,您可以考虑使用 JavaScript 中的数组和对象,以及 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.4.min.js"></script>
</head>
<body>

    <h1>按首字母分组</h1>

    <ul id="groupedData"></ul>

    <script>
        $(document).ready(function() {
            // 示例数据
            var names = ["Alice", "Bob", "Charlie", "David", "Eva", "Frank", "Grace", "Hank"];

            // 按首字母分组
            var groupedData = groupByFirstLetter(names);

            // 将分组后的数据插入到页面
            displayGroupedData(groupedData);
        });

        function groupByFirstLetter(data) {
            var groupedData = {};

            for (var i = 0; i < data.length; i++) {
                var firstLetter = data[i][0].toUpperCase();

                if (!groupedData[firstLetter]) {
                    groupedData[firstLetter] = [];
                }

                groupedData[firstLetter].push(data[i]);
            }

            return groupedData;
        }

        function displayGroupedData(groupedData) {
            var $groupedDataList = $('#groupedData');

            // 遍历分组数据并插入到页面
            for (var letter in groupedData) {
                if (groupedData.hasOwnProperty(letter)) {
                    var $group = $('<li><strong>' + letter + '</strong></li>');

                    var $namesList = $('<ul></ul>');
                    for (var i = 0; i < groupedData[letter].length; i++) {
                        $namesList.append('<li>' + groupedData[letter][i] + '</li>');
                    }

                    $group.append($namesList);
                    $groupedDataList.append($group);
                }
            }
        }
    </script>

</body>
</html>

在这个例子中,groupByFirstLetter 函数接受一个数组并返回一个对象,其中包含按首字母分组的元素。然后,displayGroupedData 函数负责将分组后的数据插入到页面中。请注意,这只是一个简单的示例,实际应用中您可能需要根据数据的实际结构和需求进行调整。

版权属于:泽泽社长
本文链接:https://blog.zezeshe.com/archives/quickly-group-jquery-by-first-letter.html
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!