javascript - 循环遍历表行，获取总计并更新行

Question

我知道问题是什么，但我不确定如何解决。

它循环遍历每个 tr，然后发布到 url 以检索总数，当发布返回值时，循环已到达表中的最后一个 tr。

因此，当 .done 回调发生时，$tr 引用表中的最后一行。

引用 post 调用的原始 $tr 的最佳方法是什么？

        $div.find('table tbody tr').each(function() {
            $tr = $(this);
            associationId = $tr.data('id');

            $.post(settings.UrlFetch, {competition_id: settings.CompetitionId, association_id: associationId})
                .done(function (res) {

                    if (res.success) {
                        $tr.find('.total').html('$' + Number(res.data.total).toFixed(2));
                    } else {
                        alert(res.errors);
                    }
                })
                .fail(function (res) {
                   alert("Unknown Error Occurred");
                });

        });

Answer 1

问题是您正在使用全局变量 $tr ，该变量在 each 回调的每次迭代中都会被覆盖，您需要使用闭包变量(通过声明 $tr 使用 var) 在每次回调调用中都有一个 $tr 的本地实例

$div.find('table tbody tr').each(function () {
    var $tr = $(this); //use local variable
    associationId = $tr.data('id');

    $.post(settings.UrlFetch, {
        competition_id: settings.CompetitionId,
        association_id: associationId
    }).done(function (res) {

        if (res.success) {
            $tr.find('.total').html('$' + Number(res.data.total).toFixed(2));
        } else {
            alert(res.errors);
        }
    }).fail(function (res) {
        alert("Unknown Error Occurred");
    });

});