javascript - 使用jquery过滤后使图像正确隐藏

Question

我使用以下代码来过滤表中的数据并在执行此操作时显示带有 id loader 的图像。

我的问题是它没有隐藏，我不知道我做错了什么。

我尝试在隐藏之前添加警报，它确实显示了警报，但在显示图像时它无法正常工作。我究竟做错了什么？ inputFilter 是过滤器输入的名称，data_fm_op 是表的名称。

JavaScript

$('#inputFilter').change(function () {
$('#loader').show();
var that = this;
$('tbody tr').each(function () {
    if ($(this).text().indexOf($(that).val()) == -1) {
        $('#data_fm_op').animate({
            marginTop: 0
        }, 50, function () {
            $(this).find('tbody tr').eq(i).hide();
        });
    } else {
        $('#data_fm_op').animate({
            marginTop: 0
        }, 50, function () {
            $(this).find('tbody tr').eq(i).show();
        });
    }
});
$('#loader').hide();

});

这是 jsFiddle: http://jsfiddle.net/m6hLR/

Answer 1

您可以等待动画回调，如果当前索引等于 tr 的长度，则隐藏加载程序

$('#loader').hide();   
$('#inputFilter').change(function() {
    $('#loader').show();
    var that = this;
    var length=$('tbody tr').length;
    $('tbody tr').each(function(i,n) {
        if ($(this).text().indexOf($(that).val()) == -1) {
            $('#data_fm_op').animate({
                marginTop: 0
            }, 50, function() {
                $(this).hide();
                if(i==length-1){//if it is the last element hide the loader
                     $('#loader').hide();           
                }  
            });
        } else {
            $('#data_fm_op').animate({
                marginTop: 0
            }, 50, function() {
                $(this).show();
                if(i==length-1){//if it is the last element hide the loader
                     $('#loader').hide();           
            }  
       });
      }           
    });
});    

http://jsfiddle.net/m6hLR/10/