同位素過濾回調 - 當多個容器具有相同類別時如何定位

Question

我正在使用同位素進行過濾。它工作正常。不過，我遇到了一個回調函數的問題，這可能只是一個基本的jQuery問題，而不是同位素問題。

我在同一頁上有多個同位素容器，每個容器都有相同的類（'.products'）。他們必須分成不同的容器，因爲有不同的部分，他們必須有相同的類（容器是在wordpress中動態創建的）。它們都由同一組過濾器控制。所有這些工作正常。但是，我現在想要在特定的過濾器組合沒有結果時添加「未找到結果」消息。

我在不透明度爲0的每個容器的開頭添加了一個'.noresults'項目。然後，我試圖顯示'.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項目，而不僅僅是這一個。產品容器是空的一個。所以，一旦任何容器是空的，它將該類添加到ALL .noresults div。

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

更新：我做了一個代碼筆在下面的第一個答案的代碼，所以你可以看到發生了什麼：http://codepen.io/anon/pen/lKuxa

Answer 1

$（」的產品。）長度是指匹配結果的數量。它將始終返回文檔中的.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"); 
    } 
}