javascript - 外部 jQuery 文件循环跳过第一个或最后一个项目

Question

我正在从外部 javascript 文件将信息加载到我的页面。该文件在页面上查找具有特定类名的 div，然后根据自定义属性(即 api 的链接)填充 div 的内容。外部文件中的函数使用类循环遍历每个 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 的内容并跳过第一个，直到我重新加载页面几次。

我没有发现我的功能有任何问题。有什么建议吗？

Answer 1

因为$("div.classname").load("https://...somewebsite.com.html div.box-container");这将覆盖第一个(或任意任意)div

中的内容

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

例如:

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