How to count "visible" tabs in jquery?

I inherited this code and now need to make modifications. I have a series of tabs:

<div id="Tabs">
    <ul>
        <li><a href="#divGen" id="lnkGeneral">General</a></li>
        <li><a href="#divA" id="lnkA">A</a></li>
        <li><a href="#divB" id="lnkB">B</a></li>
        <li><a href="#divC" id="lnkC">C</a></li>
    </ul>
</div>

These are hidden/shown using jquery depending on the 开发者_如何学Cvalue selected from a dropdown:

$("#divA").hide(); $("#divB").show(); $("#divC").hide();  
$("#lnkA").hide(); $("#lnkB").show(); $("#lnkC").hide();

The first tab (divGen) is always displayed. I need a way to loop through the list of tabs to determine which tabs may be visible, as I am adding a button to go to the next tab. Because the tabs are visible on a dynamic basis I need to determine both if the button should be shown and which tab to ‘rotate’ to when pressed. I have tried the following with no luck:

var $tabs = $('#Tabs').tabs();  
var i, count = 0;  
for (i = 0; i < $tabs.tabs('length'); i++) {  
    if ($tabs.tabs(i).is('visible')) {  
        count++;  
    }  
}  

if (count > 1)) {  
    Display the button.  
}

What am I missing? I have looked at all the examples and cannot find a solution. I have an idea it is due to the hide/show and not doing the visible test correctly.

Thank You in advance

Demo

if ( $('#Tabs ul li:visible').length > 1) ) {  
    //Display the button.  
}

Update

If you're hiding the anchor tag (which it seems you are) you may need to use

if ( $('#Tabs ul li a:visible').length > 1) ) {  
    //Display the button.  
}

For the button show/hide:

// if more than one tab is visible display the button  
if ($('#Tabs ul li a:visible').length > 1)) {  
       //Display the button.  
} else {  
       //Display the button.  
}

The function the button invokes is:

function fnNextTab(div) {  
    var $tabs = $(div).tabs();
    var selected = $tabs.tabs('option', 'selected');
    var max = $tabs.tabs('length') - 1; // Zero based

    $(div + ' ul li a').each(function(i) {
        // if the tab is visible and 'after' the current tab select it
        if (($(this).is(':visible')) && (i > selected)) {
            $tabs.tabs("select", i);    // This selects the tab
            $tabs.tabs('load', i);      // This displays the tab
            return false;               // Done searching
        }

        if (i >= max) {
            // Goto the General (first) tab
            $tabs.tabs("select", 0);    // This selects the tab
            $tabs.tabs('load', 0);      // This displays the tab
        }
    });
}

'div' is passed in on the call, so that this function can be used by different pages; each having a different collection of tabs, as well as being different names.