title: jquery selector iterate over children, then iterate over parent/sibling
body: <p>I have the following simplified HTML Below.</p>
  
  <pre><code>&lt;div id="coat"&gt;
  &lt;span class="Jan2011-Sales"&gt;10&lt;/span&gt;
  &lt;span class="Feb2011-Sales"&gt;10&lt;/span&gt;
  &lt;span class="Mar2011-Sales"&gt;10&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="boot"&gt;
  &lt;span class="Jan2011-Sales"&gt;10&lt;/span&gt;
  &lt;span class="Feb2011-Sales"&gt;10&lt;/span&gt;
  &lt;span class="Mar2011-Sales"&gt;10&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="hat"&gt;
  &lt;span class="Jan2011-Sales"&gt;10&lt;/span&gt;
  &lt;span class="Feb-Sales"&gt;10&lt;/span&gt;
  &lt;span class="Mar2011-Sales"&gt;10&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="etc."&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDITED:</p>
  
  <p>What I'd like to do is create a table like below: (almost like a pivot table) 
      </p>
  
  <pre><code>   &lt;th&gt;
         &lt;td&gt;Period&lt;/td&gt;
         &lt;td&gt;Coat&lt;/td&gt;
         &lt;td&gt;Boot&lt;/td&gt;
         &lt;td&gt;Hat&lt;/td&gt;
     &lt;/th&gt;
     &lt;tr&gt;
         &lt;td&gt;Jan2011-Sales&lt;/td&gt;
         &lt;td&gt;10&lt;/td&gt;
         &lt;td&gt;10&lt;/td&gt;
         &lt;td&gt;10&lt;/td&gt;
     &lt;tr&gt;
     &lt;tr&gt;
         &lt;td&gt;Feb2011-Sales&lt;/td&gt;
         &lt;td&gt;10&lt;/td&gt;
         &lt;td&gt;10&lt;/td&gt;
         &lt;td&gt;10&lt;/td&gt;
     &lt;tr&gt;
     etc.
  </code></pre>
  
  <p>My question is -- how do I iterate over the original HTML?
  e.g. my thinking is along the lines of iterating over the first   elements to get the rows, then getting the parent's sibling div so that I can find/match its child  to get the columns.</p>
  
  <p>Thoughts?
  THank you.</p>