同位素过滤回调 - 当多个容器具有相同的类时如何定位

Question

我正在使用同位素进行过滤。它工作正常。但是，我遇到了回调函数的问题，这可能只是一个基本的 jquery 问题，而不是同位素问题。

我在同一页面上有多个同位素容器，每个容器都有相同的类（'.products'）。它们必须分成不同的容器，因为有不同的部分，并且它们必须具有相同的类（容器是在 wordpress 中动态创建的）。它们都由同一组过滤器控制。所有这一切都很好。但是，我现在想在特定的过滤器组合没有结果时添加“未找到结果”消息。

我在每个容器的开头添加了一个“.noresults”项目，透明度为：0。然后，如果它的容器没有其他项目，我尝试显示 '.noresults' div。像这样：

$container = $('.products');

$container.isotope({ 
    filter: comboFilter,
    onLayout: function() {
         if ( $('.products').length < 2 ) { 
             $(this).find('.noresults').addClass('showme'); 
         } else {
             $(this).find('.noresults').removeClass('showme');
         }
    }
});

不幸的是，它显示了所有 .noresults 项目，而不仅仅是 .products 容器中的那个是空的。因此，一旦任何容器为空，它就会将该类添加到所有 .noresults div。

如何仅定位空容器中的 .noresults div？

更新：我用下面第一个答案中的代码做了一个代码笔，所以你可以看到发生了什么：http://codepen.io/anon/pen/lKuxa

Answer 1

$('.products').length 表示匹配结果的数量。它将始终返回文档中 .products 容器的编号。您应该改用 $(this).children().length 作为条件。尝试这样实现：

onLayout: function($ele){
    var $this = $(this),visibleItemNum = $this.children().length - $this.children("[class*=isotope-hidden]").length;  //container reference

    if(visibleItemNum<3){
        $this.find(".noresults").addClass("showme");
    }else{
        $this.find(".noresults").removeClass("showme");
    }
}