Question

$(".globalTabs").each(function(){
    var $globalTabs = $(this);
    var parent = $globalTabs.parent('form');

    //initiate jQuery UI tabs
    $globalTabs.tabs();

    var ATBwidth = $globalTabs.parent().outerWidth();
    var tabsWidth = 0;

    //get total width of all li/tabs
    $(".globalTabs .ui-tabs-nav li").each(function() {
     tabsWidth += $(this).outerWidth();
    });


    if(tabsWidth >= ATBwidth){
       //doing something here
    }


});

which is breaking due to the nested .each – is there a simple way around this issue?

breaking = functionality after the second loop, which refers to $globalTabs is no longer triggering, because it is undefined.

Stupid mistake:

After the second loop, in this section I was referring to the selector twice.

So, with $(".globalTabs").each(function(){ this of course won’t work:
$globalTabs.find(".globalTabs .ui-tabs-nav li").hide();

Had nothing to do with the loops.

Thanks everyone for your help.

Answer 1

Instead of using the value of this pass in the value from .each(index, value)

$(".globalTabs").each(function(index, value){
    var $globalTabs = $(value);
    var parent = $globalTabs.parent('form');

    //initiate jQuery UI tabs
    $globalTabs.tabs();

    var ATBwidth = $globalTabs.parent().outerWidth();
    var tabsWidth = 0;

    //get total width of all li/tabs
    $(".globalTabs .ui-tabs-nav li").each(function(index, secondValue) {
     tabsWidth += $(secondValue).outerWidth();
    });


    if(tabsWidth >= ATBwidth){
       //doing something here
    }


});