.load（）将html内容放入循环中的容器中

Question

我有一个容器$（'＃container'），我想动态地将几个elemtents加载到容器中。我有一个名为subElement.php的php布局。所以我的代码看起来像：

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

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

Answer 1

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

但是，因为您要求我们使用您所拥有的内容：

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

但是，如果这些<span>元素会破坏您的代码，那么您应该选择Explosion Pills'之类的解决方案。

Answer 2

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

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

Answer 3

每次循环时，load（）将$（'＃container'）的内容替换为你请求的新内容。

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

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

Answer 4

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