jquery - 在 jQuery 中使用 .each() 中的 .load() 方法不返回所有 html 内容

Question

我正在尝试遍历页面中的超链接列表，从每个超链接页面加载 html 内容并将其附加到当前页面中的 div 中。但结果是只有一个页面中的 html 内容被加载并附加到 div .我怎样才能达到预期的效果。

这是我试图实现结果的代码片段：

$('th[scope="row"]').children("a").each(function(){
    var url = $(this).attr("href");
    var tempDiv = $('<div id=\"loadedDiv\"></div>').appendTo('.someClass');
    var fullUrl = url+' '+'.tabClass';
    $("#loadedDiv").load(fullUrl);
});

Answer 1

您应该使用loadedDiv非 id 类，因为 id 必须是唯一的。

事实上，一些使代码更快更简洁的调整是

$('th[scope="row"]>a').each(function(){
    $('<div class=\"loadedDiv\"></div>').load(this.href + ' .tabClass').appendTo('.someClass');
});

Answer 2

$('<div id=\"loadedDiv\"></div>') 

在 .each 循环内不是一个好主意。

你会得到一些具有相同 id 的 div。

id和class的区别

Answer 3

您在每次迭代中创建具有相同id,的新元素。loadedDiv这是无效的 HTML，因为id属性必须是唯一的。此外，$("#loadedDiv")总是会获取相同的元素，通常是第一次出现，#loadedDiv并且您最终会div一遍又一遍地重写相同的内容。

id如果使用链创建、附加和加载内容，则无需为新创建的元素分配属性。

$('th[scope="row"]').children("a").each(function(){
    var url = $(this).attr("href");
    var fullUrl = url + ' .tabClass';
    $('<div/>').appendTo('.someClass').load(fullUrl);
});

Answer 4

不要使用负载，而是使用 $.get ：

$.get(fullUrl, function(response) {

    $("#loadedDiv").append(response);

});