如何在jQuery append方法中嵌套循环？现有代码存在语法错误

你遇到的是一个很常见的语法误区——不能直接在append()的字符串拼接过程中插入$.each循环语句。append()接收的是字符串或DOM元素，而循环属于执行逻辑，把两者混在一起写会让浏览器无法解析，自然触发语法错误。

错误原因拆解 #

你的原代码在拼接HTML字符串到一半时直接写$.each(value...，这相当于在字符串里硬塞了一段JavaScript执行语句，这种混合写法完全不符合语法规则，必须把循环生成的内容单独处理好，再和前后结构拼接。

修正后的完整代码 #

$.ajax({
    type: "POST",
    async: true,
    url: "<?php echo base_url(); ?>" + "index.php/admin/get_user_privilages",
    dataType: 'json',
    data: { user_id: user_id },
    success: function(res) {
        $.each(res, function(key, value) {
            // 1. 先初始化变量，用来存储嵌套循环生成的权限选择框HTML
            let checkboxContent = '';
            
            // 2. 遍历当前分类下的权限项（这里假设接口返回的权限数组键是privilages，按需调整）
            $.each(value.privilages, function(privKey, privData) {
                // 拼接单个权限的选择框结构，根据你的实际数据字段修改
                checkboxContent += `
                    <div class="priv-item">
                        <input type="checkbox" id="priv_${privData.id}" name="user_privs[]" value="${privData.id}">
                        <label for="priv_${privData.id}">${privData.priv_name}</label>
                    </div>
                `;
            });
            
            // 3. 把所有部分拼接成完整的HTML，一次性append到目标容器
            $('#image_view_panel').append(`
                <div class="col-md-6">
                    <div class="checkbox-wrapper"> <!-- 修正原代码里的checbox拼写错误 -->
                        <div class="checkbox-wrapper-heading">
                            <h5>${value.category_name}</h5>
                        </div>
                        <div class="checkbox-wrapper-label">
                            ${checkboxContent} <!-- 插入循环生成的权限选择框 -->
                        </div>
                    </div>
                </div>
            `);
        });
    }
});

核心改进点 #

• 改用模板字符串（`包裹）替代繁琐的+拼接，既避免引号嵌套错误，也让代码结构更清晰。
• 先通过内部$.each生成所有权限项的HTML片段，存储在变量中，再整体插入到外层的分类结构里，符合语法规则。
• 修正了原代码里的拼写错误：checbox改为checkbox，避免后续样式或选择器失效。

额外提醒 #

如果接口返回的权限数组键名不是privilages，记得把value.privilages改成实际的键名（比如value.permissions），确保循环能正确遍历到数据。

内容的提问来源于stack exchange，提问作者Thilina Sameera