Question

I’m at a standstill with this code. I have one page with several divs, which contain unordered lists and, using jquery to show/hide, I have turned it into tabbed content. I also have a filter that removes list items. When a filter has removed all items from a tab, a message is shown that warns the user a filter has eliminated all content from this tab. When the filter is removed, the warning message is removed for the active (visible) tab only. The filter effectively shows/removes list items within the inactive (hidden) tabs but I can not get the warning message to disappear. Please take a look, and thank you for your time:

$('div.eventContent').each( function (index, element) { 
        {
            var these_li = $ (element).find('li.eventContentItem:visible');
            if ( these_li.length > 0 ) 
            {
                $ (element).find('.noVisibleEvents').hide();
            } 
            else 
            {
                $(element).find('.noVisibleEvents').show();
            }
            these_li = 0;
        }
    })

Answer 1

I guess your problem might have to be related to the inheritance or the :visible jquery selector. As docs say, jquery will consider hidden to all elements contained by a hidden parent. So, you should check the css display property in order to stablish if the elements into a hidden tab are meant to be visible or not.
The code, however gets a little more complex

$('div.eventContent').each( function () { 
    {
        var isEmpty = true;

        $(this).find('li.eventContentItem').each(function() {
           if ($(this).css('display') != 'none') {
              isEmpty = false;  
              return false; // exits the loop
           }
        });

        if (isEmpty)             

          $ (this).find('.noVisibleEvents').hide();

        else 

            $(this).find('.noVisibleEvents').show();


})