Count div with class (.length) only shows 0 [closed]

I’ve run into this a couple of times with plugin content. It seems like the document ready event is fired while dynamic content is still being loaded. The way to check is to leave the Javascript where it is and load the page. When the page is fully loaded, get to your browser console (right click and ‘inspect element’ on Firefox or just ‘inspect’ for Chrome. On both click ‘Console’ across the top and then, in the code field (bottom for FF, top for Chrome), type in `jQuery(‘tp-tab’).length. If you get anything other than the logged value, this is the problem.

The quickest way to work around this is a hack. Put your code into a function and then in the document.ready block, call setTimeout(‘yourFunction()’, 500). The better way is to see if the plugin offers hooks that fire after the content is loaded or (blech!) edit the plugin.

if you know exactly how many tabs there will be, you can put that check into your function. For (untested) example:

(function($){
    $(document).on('ready', function() {
        setTimeout('adjustTabs()', 500);
    })
})(jQuery)
function adjustTabs() {
    if (jQuery('.tp-tabs').length < 3) {
        setTimeout('adjustTabs()', 500);
    } else {
        //  Do stuff here
    }
  }
}