Question

我有一个jquery函数，它从表的第3列获取数据 - 在其上运行一个函数 - 然后用结果替换该字段。

这是我的代码：

function getData() {

    $('#tab1_response').html("<img src='images/ajax-loader.gif' border=0> Please wait...").show();

    $('#myTable tr').each(function(index){
        var col1 = $(this).children('td.col1').text();
        $(this).children('td.col3').load('doStuff.php?url='+col1);
    });

    $("#myTable").trigger("update");
    $('#tab1_response').fadeOut(2000);
}

由于某种原因，最后两行：

$("#myTable").trigger("update");
$('#tab1_response').fadeOut(2000);

不要等待.each（函数......在运行之前完成...

相反，“Please wait ...”加载程序没有出现，我的表没有更新意味着新列不可排序（我在这里使用了tableorter for jquery - http://tablesorter.com/docs/）。

该功能可以正常工作，我可以看到我的第3列用新数据更新。

是否有一个简单的解决方案???

我希望我已经提供了足够的详细信息，但如果您需要更多信息，请告诉我们。）

Answer 1

问题不在于对$.each()的调用是对$.load()的调用。这是一个Ajax请求，它本质上是异步的 - 它在往返服务器完成之前返回。

我还有点担心你在表中执行Ajax请求每行：有多少行？

Answer 2

.load()是异步的，这意味着您的脚本在继续之前不会等待它完成。

我建议您跟踪已经完成的请求数量，并在完成所有操作后执行代码：

$('#tab1_response').html("<img src='images/ajax-loader.gif' border=0> Please wait...").show();

var requests = 0;

var requestDone = function() {
  requests--;
  if (requests == 0) {
      $("#myTable").trigger("update");
          $('#tab1_response').fadeOut(2000);
      }
  }
};

$('#myTable tr').each(function(index){
    var col1 = $(this).children('td.col1').text();
    requests++;
    $(this).children('td.col3').load('doStuff.php?url='+col1, requestDone);
});

Answer 3

有一个更优雅的解决方案。只需调用sudo元素：last-child并在加载每个循环中的最后一个元素后调用一个函数。

这样的事情：

$('table tr').each(function (){
                 dosomething();
                 if ($(this).is(":last-child")) 
                      {
                      $(this).load(function() {
                        dosomethingelse();
                      });
}

Answer 4

我想我明白了。你可以链接最后两个。

$('#myTable tr').each(...).trigger("update").fadeOut(2000);

以上是未经测试的，但不会太远。

查找jQuery链接。

Answer 5

您还可以将“上一个”id添加到上一个tr，然后隐藏最后一个tr

function getData() {
    $('#tab1_response').html("<img src='images/ajax-loader.gif'
        border=0> Please wait...").show();
    $('#myTable tr:last-child').attr('id', '#last');
    $('#myTable tr').each(function(index){
        var col1 = $(this).children('td.col1').text();

        if ($(this).is('#last')) {
            $(this).children('td.col3').load('doStuff.php?url='+col1, function () {
                $("#myTable").trigger("update");
                $('#tab1_response').fadeOut(2000);
            });
        }
    });
}

（未经测试）

Answer 6

您必须在.load()中使用回调，但仅限于您点击最后一行时。像这样重写你的代码。

function getData()
{
  $('#tab1_response')
    .html("<img src='images/ajax-loader.gif' border=0> Please wait...")
    .show();

  var rows = $('#myTable tr').length;

  $('#myTable tr').each(function(index)
  {
    var tr   = $(this),
        col1 = tr.children('td.col1').text();

    if ( (index+1) === rows) //last row, use callback to update table and fade img
    { 
      tr.children('td.col3').load('doStuff.php?url=' + col1, function(){
        $("#myTable").trigger("update");
        $('#tab1_response').fadeOut(2000);
      });
    }
    else //
    {
      tr.children('td.col3').load('doStuff.php?url=' + col1);
    }
  });  
}

警告我给了你一个问题的答案，但我警告Dean Harding，每行做一个请求并不是一个好主意。您应该找到一种方法来改进它（提示，使用JSON;）

jQuery .each（）帮助（在运行前一行之前没有完成）

6 个答案: