使用JavaScript和jQuery高效动态生成分组HTML元素-js教程-PHP中文网

使用javascript和jquery高效动态生成分组html元素

本教程详细阐述如何利用JavaScript和jQuery，从结构化数据中高效动态生成分组的HTML元素，例如带有图片和链接的按钮组。文章将重点介绍如何通过数组切片（slice）和映射（map）的方法，将数据按指定大小分块，并将其转化为可直接插入DOM的HTML字符串，从而避免传统循环嵌套append可能导致的逻辑问题和性能瓶颈，确保页面内容的正确渲染和优化。

动态生成分组HTML元素的挑战

在前端开发中，我们经常需要根据后端返回的数据或本地静态数据，动态地生成大量的HTML元素。一个常见的场景是创建类似轮播图（carousel）或网格布局，其中每个“页面”或“行”包含固定数量的子元素。例如，从一个包含多个按钮信息的数组中，每15个按钮组成一个carousel-item，每个按钮内部包含一个链接和一张图片。

传统的做法可能会尝试使用嵌套的for循环和jQuery的append()方法。然而，在append()内部的函数中，return语句一旦执行，就会立即退出当前函数，导致只添加第一个元素，而不是循环中生成的所有元素。这使得直接在append()内部构建复杂的多元素结构变得困难且容易出错。

// 常见但存在问题的尝试
$(document).ready(function () {
    let testButtonEntries = [ /* ... 大量按钮数据 ... */ ];

    // 这种方式在append内部的return会导致问题
    for (let sections = 0; sections <= testButtonEntries.length % 15; sections++) {
        $('<div class="carousel-item">')
            .append($('<div class="d-flex flex-wrap"/>').append(function () {
                for (let i = 0; i < 15; i++) {
                    // 这里每次循环都会return，导致只添加第一个元素
                    return $('<div/>')
                        .append($('<a/>', {
                            href: testButtonEntries[i].link,
                            title: testButtonEntries[i].button_title,
                            target: '_blank'
                        }).append($('@@##@@', {
                            alt: testButtonEntries[i].button_alt_text,
                            class: 'img-responsive',
                            src: 'images/' + testButtonEntries[i].button_image + '.png'
                        })));
                }
            }))
            .appendTo($('#employee-button-container'));
    }
});

登录后复制

解决方案：数据分块与声明式HTML生成

为了高效且正确地解决这个问题，我们可以采用以下两步策略：

数据分块（Chunking Data）：将原始数据数组按照预设的大小（例如每15个元素）分割成多个子数组。
声明式HTML生成（Declarative HTML Generation）：利用JavaScript的数组map()方法，将每个子数组转换为对应的HTML字符串片段，最终拼接成完整的HTML结构。

1. 数据分块

首先，我们需要将原始的按钮数据数组testButtonEntries按照每15个元素进行分块。这可以通过while循环结合splice()方法实现。splice()方法会修改原数组，并返回被移除的元素组成的新数组。

立即学习“Java免费学习笔记（深入）”；

$(document).ready(function () {
    const testButtonEntries = [
        // 示例数据，实际应用中会更多
        { button_title: 'Employee Button 1', button_alt_text: 'Alt 1', button_image: 'img1', link: '#link1' },
        { button_title: 'Employee Button 2', button_alt_text: 'Alt 2', button_image: 'img2', link: '#link2' },
        // ... 省略更多数据，假设总共有16个或更多数据
        { button_title: 'Employee Button 15', button_alt_text: 'Alt 15', button_image: 'img15', link: '#link15' },
        { button_title: 'Employee Button 16', button_alt_text: 'Alt 16', button_image: 'img16', link: '#link16' }
    ];

    const rows = []; // 用于存储分块后的数组
    const chunkSize = 15; // 每块的元素数量

    // 当原始数组还有元素时，持续进行分块
    while (testButtonEntries.length > 0) {
        // 使用splice从testButtonEntries中移除chunkSize个元素，并将其添加到rows
        rows.push(testButtonEntries.splice(0, chunkSize));
    }

    // 此时，rows 数组将包含多个子数组，每个子数组最多包含 chunkSize 个元素
    // 例如：rows = [[item1..item15], [item16]]

    // ... 后续的HTML生成代码将在这里
});

登录后复制

2. 声明式HTML生成

一旦数据被分块，我们就可以使用map()方法来遍历这些分块，并为每个分块生成相应的HTML结构。这种方法使得代码更具声明性，易于理解和维护。

$(document).ready(function () {
    const testButtonEntries = [
        // ... 同上，示例数据 ...
    ];

    const rows = [];
    const chunkSize = 15;

    while (testButtonEntries.length > 0) {
        rows.push(testButtonEntries.splice(0, chunkSize));
    }

    // 使用map将每个分块（row）转换为一个carousel-item的HTML字符串
    const generatedHtmlChunks = rows.map((row) => {
        // 对于每个row（即一个carousel-item内部的数据），再次使用map生成其内部的按钮HTML
        const innerElementsHtml = row.map((ele) => {
            const { button_title, link, button_image, button_alt_text } = ele;
            // 使用模板字符串构建每个按钮的HTML
            return `
                <div class="">
                    <a href="${link}" title="${button_title}" target="_blank">
                        @@##@@
                    </a>
                </div>
            `;
        }).join(''); // 将所有按钮的HTML字符串拼接起来

        // 返回一个完整的carousel-item的HTML字符串
        return `
            <div class="carousel-item">
                <div class="d-flex flex-wrap">
                    ${innerElementsHtml}
                </div>
            </div>
        `;
    });

    // 将所有生成的HTML字符串拼接成一个大字符串，并一次性插入到DOM中
    $("#employee-button-container").html(generatedHtmlChunks.join(''));
});

登录后复制

完整示例代码

将上述两部分结合，形成完整的解决方案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成分组HTML元素</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        /* 简单的CSS，用于模拟布局 */
        .d-flex { display: flex; }
        .flex-wrap { flex-wrap: wrap; }
        .carousel-item { border: 1px solid #ccc; margin-bottom: 10px; padding: 10px; }
        .carousel-item div { margin: 5px; border: 1px dashed #eee; padding: 5px; }
        .img-responsive { max-width: 100px; height: auto; display: block; margin: 0 auto; }
        #employee-button-container { border: 2px solid #007bff; padding: 15px; }
    </style>
</head>
<body>

    <h1>动态按钮组生成示例</h1>
    <div id="employee-button-container">
        <!-- 动态生成的按钮组将插入到这里 -->
    </div>

    <script>
        $(document).ready(function () {
            // 示例数据：包含16个按钮条目，模拟真实场景
            let testButtonEntries = [
                { button_title: '员工按钮标题 1', button_alt_text: '员工Alt文本 1', button_image: 'button_img_01', link: 'https://example.com/link1' },
                { button_title: '员工按钮标题 2', button_alt_text: '员工Alt文本 2', button_image: 'button_img_02', link: 'https://example.com/link2' },
                { button_title: '员工按钮标题 3', button_alt_text: '员工Alt文本 3', button_image: 'button_img_03', link: 'https://example.com/link3' },
                { button_title: '员工按钮标题 4', button_alt_text: '员工Alt文本 4', button_image: 'button_img_04', link: 'https://example.com/link4' },
                { button_title: '员工按钮标题 5', button_alt_text: '员工Alt文本 5', button_image: 'button_img_05', link: 'https://example.com/link5' },
                { button_title: '员工按钮标题 6', button_alt_text: '员工Alt文本 6', button_image: 'button_img_06', link: 'https://example.com/link6' },
                { button_title: '员工按钮标题 7', button_alt_text: '员工Alt文本 7', button_image: 'button_img_07', link: 'https://example.com/link7' },
                { button_title: '员工按钮标题 8', button_alt_text: '员工Alt文本 8', button_image: 'button_img_08', link: 'https://example.com/link8' },
                { button_title: '员工按钮标题 9', button_alt_text: '员工Alt文本 9', button_image: 'button_img_09', link: 'https://example.com/link9' },
                { button_title: '员工按钮标题 10', button_alt_text: '员工Alt文本 10', button_image: 'button_img_10', link: 'https://example.com/link10' },
                { button_title: '员工按钮标题 11', button_alt_text: '员工Alt文本 11', button_image: 'button_img_11', link: 'https://example.com/link11' },
                { button_title: '员工按钮标题 12', button_alt_text: '员工Alt文本 12', button_image: 'button_img_12', link: 'https://example.com/link12' },
                { button_title: '员工按钮标题 13', button_alt_text: '员工Alt文本 13', button_image: 'button_img_13', link: 'https://example.com/link13' },
                { button_title: '员工按钮标题 14', button_alt_text: '员工Alt文本 14', button_image: 'button_img_14', link: 'https://example.com/link14' },
                { button_title: '员工按钮标题 15', button_alt_text: '员工Alt文本 15', button_image: 'button_img_15', link: 'https://example.com/link15' },
                { button_title: '员工按钮标题 16 (最后一个)', button_alt_text: '员工Alt文本 16', button_image: 'button_img_16', link: 'https://example.com/link16' }
            ];

            const rows = []; // 用于存储分块后的数组
            const chunkSize = 15; // 每块的元素数量

            // 1. 数据分块：将原始数组按 chunkSize 分割
            while (testButtonEntries.length > 0) {
                rows.push(testButtonEntries.splice(0, chunkSize));
            }

            // 2. 声明式HTML生成：将分块后的数据转换为HTML字符串
            const dataHtml = rows.map((row) => {
                // 为当前分块生成内部的按钮HTML
                const elementsHtml = row.map((ele) => {
                    const { button_title, link, button_image, button_alt_text } = ele;
                    // 注意：这里假设图片路径是 'images/' + button_image + '.png'
                    // 如果实际路径没有 .png 后缀，请根据实际情况调整
                    return `
                        <div class="button-wrapper">
                            <a href="${link}" title="${button_title}" target="_blank">
                                @@##@@
                            </a>
                        </div>
                    `;
                }).join(''); // 将内部所有按钮的HTML拼接成一个字符串

                // 为当前分块生成外部的 carousel-item HTML
                return `
                    <div class="carousel-item">
                        <div class="d-flex flex-wrap">
                            ${elementsHtml}
                        </div>
                    </div>
                `;
            }).join(''); // 将所有 carousel-item 的HTML拼接成一个字符串

            // 3. 将生成的HTML一次性插入到DOM中
            $("#employee-button-container").html(dataHtml);
        });
    </script>
</body>
</html>

登录后复制

注意事项与总结

效率提升：相较于在循环中多次操作DOM（每次append()都会触发DOM重绘），这种方法先将所有HTML构建成一个字符串，然后通过html()或append()一次性插入DOM，可以显著减少DOM操作次数，提高页面渲染性能。
代码可读性与维护性：使用map()和模板字符串（Template Literals）使得HTML结构与数据逻辑分离，代码更清晰，易于理解和修改。
splice()对原数组的影响：Array.prototype.splice()方法会修改原始数组。如果需要保留原始数据，应先创建数组的副本（例如使用slice()方法：const tempArray = [...testButtonEntries]; 或 const tempArray = testButtonEntries.slice();），再对副本进行splice操作。在本例中，修改原数组是可接受的。
图片路径：示例中假设图片路径为images/${button_image}.png，请根据实际项目中的图片存放路径和命名规则进行调整。
错误处理：在实际应用中，应考虑数据为空或数据格式不正确的情况，添加相应的错误处理逻辑。