title: Repurposing some Javascript for a similar DOM element
body: <p>On my page I have an unordered list with some list items that serve as links to load content into a div.</p>
  
  <p>The art direction requires that the list items be fully justified to the left and right. I've written some JavaScript to figure out how wide the <code>ul</code> is and calculate the width of the individual <code>li</code> elements, divide the remaining space and push the elements to the left and right respectively. It works great.</p>
  
  <p>Now we want to add another <code>ul</code> under the first with another set of links.</p>
  
  <p>How can I repurpose my code to do the same work as before?</p>
  
  <p>All the list items are styled <code>display:inline;</code> and they need to be fluid in width in the event a font on one browser is a little bigger than another.</p>
  
  <p>Here's my HTML: (It's all run together to overcome the spacing issue with inline list elements)</p>
  
  <pre><code>&lt;div id="portfolio"&gt;
      &lt;ul class="stacked-nav-top"&gt;
          &lt;li class="project_link"&gt;
              &lt;a href="#" class="project_class planning" id="commercial-industrial" title="Commercial Industrial Projects"&gt;
                  Commercial &amp;amp; Industrial
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="breaker"&gt;//&lt;/li&gt;
          &lt;li class="project_link"&gt;
              &lt;a href="#" class="project_class planning" id="government-institutional" title="Government Institutional Projects"&gt;
                  Government &amp;amp; Institutional
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="breaker"&gt;//&lt;/li&gt;
          &lt;li class="project_link"&gt;
              &lt;a href="#" class="project_class planning" id="affordable-housing" title="Affordable Housing Projects"&gt;
                  Affordable Housing
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="breaker"&gt;//&lt;/li&gt;
          &lt;li class="project_link"&gt;
              &lt;a href="#" class="project_class planning" id="multi-family-housing" title="Multi-family Housing Projects"&gt;
                  Multi-family Housing
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my JavaScript:</p>
  
  <pre><code>$(function()
  {
      var linkwidth = 0;
      $('#portfolio ul li.project_link').each(function() 
      {
          linkwidth += $(this).outerWidth()
      });
  
      var leftover = ($('#portfolio ul').outerWidth() - linkwidth);
      var breakerwidth = Math.floor((leftover / 3));
      $('#portfolio ul li.breaker').css('width', breakerwidth);
  });
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>My CSS:</p>
  
  <pre><code>section#portfolio ul {
      display:block;
      width:820px;
      text-align:center;
  }
  .stacked-nav-top {
      border-top:solid 1px rgba(97,58,17,.3);
      margin:0px;
      background:transparent url(images/dotted_line_820.png) center 19px no-repeat;
      padding:10px 0px;   
  }
  .stacked-nav-bottom {
      border-bottom:solid 1px rgba(97,58,17,.3);
      padding-bottom:10px;
      margin:10px 0px 15px 0px;
  }
  section#portfolio ul li {
      display:inline;
      font:lighter .65em "Tahoma", "Geneva", sans-serif;
      color:rgb(145,145,145);
      text-transform:uppercase;
  }
  section#portfolio ul li.breaker {
      display:inline-block;
      text-align:center;
  }
  </code></pre>
  
  <p>I've tried wrapping all the JavaScript in a <code>$('#portfolio ul').each(...</code> but that doesn't seem to work. It sets the spacing according to the first <code>ul</code> not both individually.</p>