title: jquery nested .each
body: <pre><code>$(".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 &gt;= ATBwidth){
         //doing something here
      }
  
  
  });
  </code></pre>
  
  <p>which is breaking due to the nested <code>.each</code> - is there a simple way around this issue?</p>
  
  <p>breaking = functionality after the second loop, which refers to <code>$globalTabs</code> is no longer triggering, because it is undefined.</p>
  
  <p><strong>Stupid mistake:</strong></p>
  
  <p>After the second loop, in this section I was referring to the selector twice.</p>
  
  <p>So, with <code>$(".globalTabs").each(function(){</code> this of course won't work:
  <code>$globalTabs.find(".globalTabs .ui-tabs-nav li").hide();</code></p>
  
  <p>Had nothing to do with the loops.</p>
  
  <p>Thanks everyone for your help.</p>