我正在从外部 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 的内容并跳过第一个,直到我重新加载页面几次。
我没有发现我的功能有任何问题。有什么建议吗?
最佳答案
因为
$("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
});
关于javascript - 外部 jQuery 文件循环跳过第一个或最后一个项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45312685/