在 JQUERY 的 foreach 中追加答案

【问题标题】：append inside a foreach in JQUERY在 JQUERY 的 foreach 中追加
【发布时间】：2023-03-28 06:00:02
【问题描述】：

嗨，朋友们，我使用了一个 foreach，在里面我用.append 显示 html，这是我执行模态的时候，这是代码：

    $('#modalEditProducts').on('show.bs.modal', () => {
    arrayProducts.forEach((q) =>{
        $('#modalHERE')
        .append('<div style="width: 100%; text-align: center;">'+
                  '<img src="'+q.photo+'" width="40%">'+
                '</div>'+
                '<div style="width: 70%;">'+
                 '<form>'+  
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 1:</label>'+
                      '<input type="text" class="form-control" value="valor1" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 2:</label>'+
                      '<input type="text" class="form-control" value="valor2" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                    '<label for="recipient-name" class="col-form-label">valor 3:</label>'+
                    '<input type="text" class="form-control" value="valor3" id="recipient-name">'+
                  '</div>'+
                 '</form>'+
                '</div>');
     })
})

问题是当我关闭模型并重新打开它时，数据显示加倍...我检查了我的数组，这没有加倍，如果 foreach 保存数据是如何保存的，我不知道，请可以你说我的错误是什么？或者我怎么能解决这个问题？

如果您需要更多数据，请告诉我，谢谢。

【问题讨论】：

用.html替换.append
你也可以考虑在forEach循环之前empty()你的容器：$('#modalHERE').empty();

标签： jquery foreach append

【解决方案1】：

问题是您一遍又一遍地附加表单而没有先清除它。先清除html然后重新加载循环

$('#modalEditProducts').on('show.bs.modal', () => {
$('#modalHERE').html('');
arrayProducts.forEach((q) =>{
    $('#modalHERE')
    .append('<div style="width: 100%; text-align: center;">'+
              '<img src="'+q.photo+'" width="40%">'+
            '</div>'+
            '<div style="width: 70%;">'+
             '<form>'+  
                '<div class="form-group">'+
                  '<label for="recipient-name" class="col-form-label">valor 1:</label>'+
                  '<input type="text" class="form-control" value="valor1" id="recipient-name">'+
                '</div>'+
                '<div class="form-group">'+
                  '<label for="recipient-name" class="col-form-label">valor 2:</label>'+
                  '<input type="text" class="form-control" value="valor2" id="recipient-name">'+
                '</div>'+
                '<div class="form-group">'+
                '<label for="recipient-name" class="col-form-label">valor 3:</label>'+
                '<input type="text" class="form-control" value="valor3" id="recipient-name">'+
              '</div>'+
             '</form>'+
            '</div>');
 })

})

【讨论】：

这行得通，但现在只显示一个数据，在我的数组中我有两个数据
啊，我看到你在循环，我会改变我的答案。没看到那个循环。所以你还在追加，你只需要先清除div。

【解决方案2】：

将.append 替换为.html。要将多个元素添加到模态，您需要先循环并创建模板然后将其添加到模态

您正在使用.append 继续附加模板，因此请使用.html API 将现有模板替换为新模板。

$('#modalEditProducts').on('show.bs.modal', () => {
    var template = "";
    arrayProducts.forEach((q) =>{
    template +='<div style="width: 100%; text-align: center;">'+
                  '<img src="'+q.photo+'" width="40%">'+
                '</div>'+
                '<div style="width: 70%;">'+
                 '<form>'+  
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 1:</label>'+
                      '<input type="text" class="form-control" value="valor1" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                      '<label for="recipient-name" class="col-form-label">valor 2:</label>'+
                      '<input type="text" class="form-control" value="valor2" id="recipient-name">'+
                    '</div>'+
                    '<div class="form-group">'+
                    '<label for="recipient-name" class="col-form-label">valor 3:</label>'+
                    '<input type="text" class="form-control" value="valor3" id="recipient-name">'+
                  '</div>'+
                 '</form>'+
                '</div>';

     })
     $('#modalHERE')
        .html(template );
}

 )

【讨论】：

这行得通，但现在只显示一个数据，在我的数组中我有两个数据
对..逻辑有问题..你想在同一个modalHere中添加2个元素..你需要更新你的逻辑
在循环中，当使用.html 时，您正在覆盖之前的更改。否则，您可以使用.append 查看@cesars 答案