Question

我正在从外部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的内容并跳过第一个，直到我多次重新加载页面。

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

Answer 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
});

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

1 个答案: