php - .load() 将 html 内容循环加载到容器中

Question

我有一个容器 $('#container') 并且我想将几个元素动态加载到容器中。我有一个名为 subElement.php 的 php 布局。所以我的代码看起来像：

for(i = 0;i<10;i++){
    $('#container').load('subElement.php?id='+i,function(data){});
}

只有一个 subElement.php 布局被加载到容器中。我怎样才能以更好的方式做到这一点？

score 5 · Accepted Answer

理想情况下，您应该重写您的 PHP 脚本以一次获取所有数据，因此您只需要一个.load. 这样做会更快，对用户的网络连接更温和。

但是，既然您要求我们使用您所拥有的：

for(i = 0;i<10;i++){
    $('#container').append($('<span>').load('subElement.php?id='+i));
}

但是，如果这些<span>元素会弄乱您的代码，您应该改用Explosion Pills 之类的解决方案。

score 3 · Accepted Answer

.load每次都会覆盖内容。相反，您必须附加它们，可能像这样：

$.get('subElement.php?id=+1', function (data) {
   $("#container").append(data);
});

score 1 · Accepted Answer

每次循环时， load() 都会将 $('#container') 的内容替换为您请求的新内容。

为了提高效率，最好的办法是在一次 gulp 中对所有子元素进行 ajax，而不是发出 10 个单独的 HTTP 请求。

另一种方法是，如果由于某种原因您无法更改 api 以支持获取多个元素，则使用 .get() 并在进行单个替换之前收集所有答案。

score 0 · Accepted Answer

0

您可以使用$('#container').append('some content')添加到#container.

于 2012-12-10T18:10:04.610 回答

4 回答 4