每次（）迭代后的jQuery回调答案

【问题标题】：jquery callback after each() iteration每次（）迭代后的jQuery回调
【发布时间】：2013-12-18 21:17:17
【问题描述】：

 $.each(mappings, function(key, item) {
        if (match(selected_values, item)) {
          $(key).show("slow");
        } else {
          $(key).hide("slow");
        }
    });

    //At this point, all items are still visible!
    var item_count = $('.item').filter(':visible').length;
    if (item_count < 12) { 
        $('.item').not(':visible').slice(0,12 - item_count).show();
    }

我正在迭代一个数据结构，根据一些选定的属性，一些项目被隐藏，其他项目被显示。

麻烦的是，客户端请求可见的最少项目。因此，即使过滤工作正常，并且我得到了 3 个可见项目，它们也应该再填充 9 个元素，以便至少始终显示 12 个。

现在，在每次迭代之后，.show() 和 .hide() 函数似乎还没有终止。如何以及在何处正确应用填充功能？

我已经检查过了 Invoking a jQuery function after .each() has completed 但他在每个.show() 或.hide() 之后应用函数，这不是我想要的（在迭代期间填充是不行的，我们首先需要隐藏所有不适用的）。

这个： execute callback after jquery each iteration 不起作用，当调用该函数时我遇到了同样的问题（show() 和 hide() 还没有完成）。

编辑：我刚刚发现删除.show() 和.hide() 方法中的“慢”属性可以解决问题。现在，如果我想保留动画怎么办？

【问题讨论】：

是的，我刚刚发现并编辑了我的问题。是动画。谢谢

标签： javascript jquery each visible

【解决方案1】：

它是同步的，所以你不需要回调，但你有异步动画，这才是真正的问题。只需在循环中使用计数器而不是检查元素长度，或者添加一个类：

$.each(mappings, function(key, item) {
    if (match(selected_values, item)) {
      $(key).addClass('selected').show("slow");
    } else {
      $(key).hide("slow");
    }
});

if ($('.item.selected').length < 12) { 
    $('.item').not('.selected').slice(0,12 - item_count).show();
}

【讨论】：

我喜欢添加类的解决方案，。应该比过滤可见的更快（？）。当然，在任何过滤再次开始之前，我还必须添加一个对应的 removeClass。

【解决方案2】：

只需将.stop() 添加到链中，您可能会得到很好的结果：

$('.item').not(':visible').slice(0,12 - item_count).stop().show();

任何先前启动的动画（显示/隐藏）都将停止，并且该项目将被显示。

【讨论】：