jquery nested .each

each, for-loop, foreach, jquery, loops

Solution

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
    }


});

Problem

``` $(".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.

Original source