遍历AJAX返回数组生成div内容重复，如何按不同区块独立渲染

• 你使用全局选择器$(".container-offer")追加内容时，会匹配页面上所有已生成的同class元素，每新增一个条目就会往之前所有已存在的区块里重复插入内容，这是出现重复的核心原因
• 没有封装通用的渲染逻辑，三个数组重复写代码也容易出现逻辑不一致的问题
• 原有代码中value.articulos[index]的写法存在逻辑错误：这里的index是你遍历目标数组（比如firstItems）的下标，而每个条目自身的articulos是独立数组，从你给出的结构来看每个articulos长度为1，应该固定取索引0，否则数组长度超过1时会出现索引越界。

if(idOffer == 8){
    // 封装通用渲染函数，复用逻辑
    function renderOfferBlock($parent, itemList) {
        $.each(itemList, function(index, value){
            // 先创建当前区块的根元素，存为变量，只操作这个元素，避免影响其他区块
            const $block = $(`
                <div class="container-offer">
                    <div class="panel-heading-offer"><span class="ml-3">${value.nombre}</span></div>
                </div>
            `);
            // 只往当前创建的区块里追加条目，不要用全局选择器
            $block.append(`
                <div class="panel-heading-offer-items row mt-2">
                    <div class="col-md-1 ml-2">
                        <input type="checkbox" value="${value.articulos[0].id}">
                    </div>
                    <div class="col-md-2 ml-2">
                        <span>${value.articulos[0].codigo}</span>
                    </div>
                    <div class="col-md-4">
                        <span>${value.articulos[0].nombre}</span>
                    </div>
                    <div class="col-md-2">
                        <span>${value.articulos[0].precio} €</span>
                    </div>
                    <div class="col-md-2">
                        <input type="number" class="form-control" value="1">
                    </div>
                </div>
            `);
            // 把整个区块追加到父容器
            $parent.append($block);
        });
    }

    const $container = $(".div-bag");
    const targetObj = response[2];
    // 分别渲染三个数组，内容完全独立
    renderOfferBlock($container, targetObj.firstItems);
    renderOfferBlock($container, targetObj.secondItems);
    renderOfferBlock($container, targetObj.thirdFamily);
}

• 把重复的渲染逻辑抽成公共函数，传入要渲染的数组即可，不需要重复写三次结构代码
• 每次创建区块时先把DOM节点存为本地变量，所有追加操作都只针对当前这个节点，不会误操作其他已存在的区块，彻底解决内容重复问题
• 修正了articulos的索引取值逻辑，避免出现索引越界取不到值的问题
• 三个数组按顺序渲染，自动形成三个独立区块，符合你的预期效果
• 如果单个条目对应多个商品，只需要在公共函数里再加一层遍历value.articulos的逻辑即可

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