Take the 2-minute tour ×

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();
            these_li = 0;
share|improve this question
Can you post your HTML too, please? Also, you appear to be missing a semicolon after your each block. –  SenorAmor Feb 28 '12 at 3:10
@SenorAmor You don't need semi-colons in js unless your code is inline. –  Birdman Feb 28 '12 at 3:13
@Birdman - I agree with your generalisation about semicolons (there are some cases where you do need them), but regarding space between function names and the opening ( - that works so $ (example) is fine. Can you give an example of a browser that can't handle it? –  nnnnnn Feb 28 '12 at 3:43
Your right @nnnnnn, I retract. Never tested it. I assumed b/c in most other languages, you put a space in a spot like that and you'll get an error –  Birdman Feb 28 '12 at 4:31
add comment

1 Answer

up vote 0 down vote accepted

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();



share|improve this answer
Thanks! The only thing I had to change was the final if/else - the hide() and show() were in the wrong place, it works as desired now! –  Chris Rockwell Feb 28 '12 at 14:39
add comment

Your Answer


