Question

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

你需要创建一个数组来存储各种各样的tbodies。从第一个开始并运行一个加载。完成后，将第一个数组取出。所以你这样传球：

[1,2,3,4] [2,3,4] [3,4] [4] []

你继续调用一个加载函数，它接受一个数组，加载第一个元素，并传递剩下的元素或中断元素。

EX：

loadElement( $("table#dynamicTable tbody") );

function loadElement( $elements ) {
    $elements.load( "filethatgeneratestablerows.php",
            loadElement( $elements.filter(":gt(0)") ) );
}

Answer 3

你可以做一个

$("table#dynamicTable #1").load("filethatgeneratestablerows.php", function(event) {
     $("table#dynamicTable #2").load("filethatgeneratestablerows.php", function(event) {
        ....
     });
  });
});

未经测试，但您应该明白

jquery .each（）。load（）等待完成

3 个答案: