jquery .each（）。load（）等待完成 [英] jquery .each() .load() wait for completion

问题描述

我正在使用jquery将行加载到表中，我想知道如何逐个加载它们;即第二个块只应在第一个块完成加载后开始加载。

I'm loading rows into a table using jquery and I want to know how I can make them load one by one; i.e. the second block should only start to load once the first has finished loading.

我的表看起来有点像这样：

My table looks a bit like this:

<table id="dynamicTable">
  <thead>
    <tr>
      <th>Heading</th>
      ...
    </tr>
  </thead>
  <tbody id="1">
  </tbody>
  <tbody id="2">
  </tbody>
</table>

我的jquery看起来有点像这样：

And my jquery looks a bit like this:

$("table#dynamicTable tbody").each(function() {
  $(this).load("filethatgeneratestablerows.php");
});

（它比这更复杂，因为它根据tbody id生成内容，还包括一个复选框系统，以选择你想要影响哪些tbody元素，但一切正常，所以我把它剥离，使我的实际问题更加明显！）

(it's a little more complicated than this as it generates content based on the tbody id and also includes a checkbox system to choose which tbody elements you want to affect, but that all works fine and so I've stripped it down to make my actual question more obvious!)

推荐答案

var bodies = $("table#dynamicTable tbody"),
    i = 0;

(function loadBody() {
   bodies.eq(i++).load("filethatgeneratestablerows.php", loadBody);
})();

这一次调用集合的每个索引的加载。当一次加载完成后，它会再次使用递增的索引调用 loadBody 。

This calls load on each index of the collection one at a time. When one load is done, it calls loadBody again, using the incremented index.

当 i 大于最后一个， .eq（）将返回一个空的jQuery对象，因此序列将在那里结束。

When i is greater than the last one, .eq() will return an empty jQuery object, so the sequence will end there.

这篇关于jquery .each（）。load（）等待完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！