title: Calculating total width within elements using jQuery using each
body: <p>I am trying to calculate the total width of all divs within a section. I would like to calculate the width of each div within  .mainScroll, add them up, and set the width of the section to that os the sum of its contents. Here is my HTML markup.</p>
  
  <pre><code>    &lt;section&gt;
          &lt;div class="mainScroll"&gt;
               &lt;div&gt;some content&lt;/div&gt;
               &lt;div&gt;some content&lt;/div&gt;
               &lt;div&gt;some content&lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;section&gt;
          &lt;div class="mainScroll"&gt;
               &lt;div&gt;some content&lt;/div&gt;
               &lt;div&gt;some content&lt;/div&gt;
               &lt;div&gt;some content&lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>And here is my jQuery thus far:</p>
  
  <pre><code>var totalWidth = 0;
  
  $('section').each(function(){
      var select = $(this).find('.mainScroll div');
      select.each(function(index) {
          totalWidth += parseInt($(this).outerWidth(true), 10);   
      });
  
      $(this).css({ 'width' : totalWidth});
      var totalWidth = 0;
  
  });
  </code></pre>
  
  <p>This outputs NaN.  How can I set this up so it loops through each section, then loops through that sections individual elements, adds up its height, and then sets the section to have that exact height?</p>