外部 jQuery 文件循环跳过第一项或最后一项答案

【问题标题】：External jQuery file loop skips over first or last item外部 jQuery 文件循环跳过第一项或最后一项
【发布时间】：2017-12-31 22:25:01
【问题描述】：

我正在从外部 javascript 文件将信息加载到我的页面。该文件在页面上查找具有特定类名的 div，然后根据自定义属性填充 div 的内容，该属性是 api 的链接。外部文件中的函数循环遍历每个带有类的 div，并动态填充 div 的 id。

这是我页面上 div 的代码：

<div class="classname" data-apisrc="www.someapi1.com" id="box1"></div>
<div class="classname" data-apisrc="www.someapi2.com" id="box2"></div>
<div class="classname" data-apisrc="www.someapi3.com" id="box3"></div>

这是外部文件中的代码：

$(function() {
    $("div.classname").load("https://...somewebsite.com.html div.box-container");

    var i=0;

    var box = $("div.classname");

    $(box).each(function(apisrc, div_id) {
        i++;

        var apisrc = $(this).attr("data-apisrc");
        var div_id = 'box'+i;
        $(this).attr('id',div_id);
        $(this).val(i);

        $this = $(this);

        $.ajax({
            type: "GET",
            url: apisrc,
            async: true,
            success: function(result) {
                ...loads content into each div
            },
            error: function() {
                $this.text("content could not be loaded");
                //alert('error');
            }
        });
    });
});

这是外部文件中唯一的函数。它在页面顶部的当前文件中被调用，但这不重要，因为该函数被包装在一个 document.ready 函数中

页面上有三个这样的 div。出于某种原因，它只显示来自第二个和第三个 div 的内容并跳过第一个，直到我重新加载页面几次。

我看不出我的功能有什么问题。有什么建议吗？

【问题讨论】：

您是否在代码的...loads content into each div 部分中使用了i？
您正在做$("div.classname").load(... 以及一个ajax 调用来加载每个div 中的数据？？如果您要在 ajax 的基础上进行一些增量更改，请在 load(... 完成后进行。
您已经在$("div.classname") 上执行load 对吗？所以在发现你正在尝试加载之后。加载完成后查看我的答案。
?? var apisrc = ...、var div_id = ... 覆盖传递给 each 的参数。 apisrc 包含 jQuery 对象中元素的索引，div_id 包含元素本身，如果您使用参数，则根本不需要 i ...
@Teemu 是的，她正在覆盖当前项目引用，然后使用 this 引用当前项目。不需要那种压倒一切的！！

标签： javascript jquery html loops each

【解决方案1】：

因为 $("div.classname").load("https://...somewebsite.com.html div.box-container"); 这是在第一个（或任意）div

中覆盖您的内容

有时（您尝试过的很少）load 首先解析，然后是ajax，因此ajax success 内部的更改会影响 DOM。如果您需要这两个内容（来自load(...)）并且在ajax success 中添加内容，则在加载完成后执行此操作，将回调作为加载的第二个参数传递，并将整个代码移到那里。

例如：

$("div.classname").load("https://...somewebsite.com.html div.box-container", function(){
    //place the code you want to execute after load is completed
});

【讨论】：