jquery load（）不适用于数组循环答案

【问题标题】：jquery load() not working with array loopjquery load（）不适用于数组循环
【发布时间】：2012-12-11 07:44:55
【问题描述】：

我要做的是将数百个文件的列表存储在一个数组中，并使用 jquery load() 函数循环加载它们的内容。

我对jquery和javascript知之甚少，这是我设法写的，但它不起作用。

var files=['index1c.html','index23c.html'];

for(var index = 0; index < files.length; index++){
    var file = files[index];

$('#result').load('file .desc');
}

我认为load() 中给出的变量文件有问题，这是正确的方法吗？如果我直接写一个文件名代替file，它工作正常，如下所示：

$('#result').load('index1c.html .desc');

【问题讨论】：

.load() 将在每次加载新文件时覆盖#result 的内容。这是你打算发生的事情吗？
@Blender：不，我想要附加内容。是的，这就是 load() 所做的，我没有注意这一点。有什么解决办法吗？
“数百个文件”。可怜的小服务器，可怜的小客户端，可怜的互联网。
@Engineer：如果选择器在 URL 之后传递，jQuery 会使用这些元素而不是整个页面。
@Blender 感谢您的信息。不知道。

标签： javascript jquery arrays loops

【解决方案1】：

变化：

$('#result').load('file .desc');

收件人：

$('#result').load(file + ' .desc');

请注意，加载方法会在添加新内容之前删除元素的内容。您可以创建唯一 ID，例如 result1、result2 ... 和代码：

for(var index = 0; index < files.length; index++){
    var file = files[index];
    $('#result' + (index + 1) ).load(file + ' .desc');
}

或者你可以使用类和eq方法：

var $results = $('.results')
for(var index = 0; index < files.length; index++){
    var file = files[index];
    $results.eq(index).load(file + ' .desc');
}

或者，如果您想附加 data，您可以使用 $.get 实用函数而不是 load 方法。

【讨论】：

有什么方法可以防止它被覆盖而是附加它？
@Abhi 你可以使用$.get实用功能。
一个可能的问题 Abhi - 您是否需要保证文件的内容按照请求的顺序列出？对于简单的循环加载，这是无法保证的。
@undefined：我尝试使用$.get，但看起来我需要使用一些服务器端技术来获取正确格式的数据。我试过这段代码$.get('index1c.html',function(data){alert("Data Loaded: " + data);});，但它给出了Data Loaded: [object XMLDocument]，当我解析xml时，它显示null
@Abhi 实际上 load 和 $.get 都需要服务器才能工作，如果您的服务器正在运行，则从服务器返回的 data 创建一个 jQuery 对象，找到该元素然后附加它，@987654337 @

【解决方案2】：

您正在使用文字字符串'file .desc'。

看起来你想要file + '.desc'。

'a b' 是字符串a b，而a + ' b' 是字符串' b' 附加了变量a 的内容。

【讨论】：

【解决方案3】：

尝试使用jQuery.ajaxSetup({async:false});

{async:false} 将持有剩余代码的执行。一旦你得到 ajax 代码的响应，剩下的代码就会被执行。执行ajax响应后将async重置为真jQuery.ajaxSetup({async:true});

所以最终的代码是

var files=['index1c.html','index23c.html'];

for(var index = 0; index < files.length; index++){
    var file = files[index];
    jQuery.ajaxSetup({async:false});
    $('#result').load('file .desc');
    jQuery.ajaxSetup({async:true})
}

【讨论】：