Isotope filtering callback - how to target when multiple containers have same class

Question

I am using Isotope for filtering. It is working properly. However, I've run into an issue with a callback function, which may just be a basic jquery issue, rather than an isotope issue.

I have multiple isotope containers on the same page, each with the same class ('.products'). They have to be broken up into different containers because there are different sections, and they have to have the same class (containers are dynamically created in wordpress). They're all controlled by the same set of filters. All of this works fine. However, I now want to add a "No results found" message when a particular combination of filters has no results.

I added a '.noresults' item to the beginning of each container with opacity:0. Then, I attempted to show the '.noresults' div if its container has no other items. Like so:

$container = $('.products');

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

Unfortunately, it's showing ALL the .noresults items, rather than just the one that's in a .products container that's empty. So, once ANY container is empty, it adds the class to ALL .noresults divs.

How do I target only the .noresults divs that are in empty containers?

UPDATE: I made a code pen with the code in the first answer below, so you can see what's happening: http://codepen.io/anon/pen/lKuxa

Answer 1

$('.products').length means the quantity of the matched results. It will always return the number of the .products container in the document. You should use $(this).children().length as condition instead. Try to implement like this:

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");
    }
}