在 for 循环中使用 jQuery 附加 col div 只会在第一行给出结果答案

【问题标题】：Appending a col div with jQuery in a for loop only gives me results on the first row在 for 循环中使用 jQuery 附加 col div 只会在第一行给出结果
【发布时间】：2019-07-23 05:52:51
【问题描述】：

我正在从 Django python 函数中检索 AJAX 转储。然后，我试图在引导行+列表上反映数据。但是，在数组列表中使用 append() 时，我似乎只得到了转储的第一行。当我删除第二个 for 循环时，转储工作正常，只是没有给我需要的月份行。

当然，我有不止一行的数据。

这可能是什么原因造成的？

//html代码

<div id="category_filtered_list">
    <div class="row report_row mockup" id="category_mockup">
        <div class="col-md-1 name"></div>
        <div class="col-md-1 code"></div>
        <div class="col-md-1 forecasted"></div>
        <div class="col-md-1 running_total"></div>
        <div class="monthsRows" id="monthsRows"></div>            

    </div>
</div>

//Ajax JS function
$.post(
                "",
                {
                    "getcategories": true,
                    'date-from': date_from,
                    'date-to': date_to
                },
                function(response) {
                    $("#category_filtered_list .report_row.product").remove()
                    data = JSON.parse(response);
                    for (var i=0; i<data.length;i++){
                        obj = data[i]
                        var mockup = $('#category_mockup')
                        var temp_mockup = $(mockup).clone()
                        $("#category_filtered_list").append(temp_mockup)
                        $(mockup).attr('id',"temp_product");

                        var temp_prod = $("#temp_product")

                        $(temp_prod).find('.name').html(obj.category_name)
                        $(temp_prod).find('.code').html(obj.category_code)
                        $(temp_prod).find('.minor').html(obj.category_minor)
                        $(temp_prod).find('.parent').html(obj.category_parent)                        
                        $(temp_prod).find('.forecasted').html(obj.category_forecasted)
                        $(temp_prod).find('.running_total').html(obj.products_count)

//this for loop is causing the issue ******* when removed, the rest of the code works fine. Please note that obj.prods_num_per_month is an array

                    for (i=0; i<=obj.prods_num_per_month.length; i++){
                            $(temp_prod).find('.monthsRows').append(
                                $('<div class="col-xs-1">').html(obj.prods_num_per_month[i])

                            );
                        } 


                        $(temp_prod).removeClass('mockup');
                        $(temp_prod).addClass('product');
                        $(temp_prod).attr('id','')
                    }
                }
            ).done(function(){
                $("#filtering .message_loading").html("Completed! <i class='far fa-smile text-success'></i>")
                $("#filtering .message_loading").addClass("fading")
                $("#export_button").show()
                setTimeout(function(){ $("#filtering .message_loading").html('') }, 5000);
              });

我希望获得所有包含相关数据的行，但我只是获得第一行。

【问题讨论】：

好像你在这个循环中缺少}：for (var i=0; i<data.length;i++){
不幸的是，for循环是关闭的，完成函数之前的第二个括号

标签： javascript jquery html django ajax

【解决方案1】：

不是我最自豪的时刻...所以.. 代码实际上运行良好，但我已将 'i' 声明为两个 'for' 循环的索引，导致主循环提前终止..

我更改了第二个 for 循环的索引，它按预期启动并运行。

2 小时的调试……真的不是我最自豪的时刻。好消息是它已修复！

【讨论】：