title: Sorting DIVs inside other DIVs
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/2351635/how-to-sort-divs-according-to-their-id-using-jquery">How to sort divs according to their id using jQuery?</a>  </p>
  </blockquote>
  
  
  
  <p>Well I'm having a really hard time trying to solve this and I actually had no sucess until now, I'm trying to sort DIVs inside Other DIVs by ID.
  So here's how my DIVs are distribuited in my page</p>
  
  <pre><code>&lt;div id="products" &gt;
     &lt;div class="line"&gt;
        &lt;div id="Album2"&gt;[there are images and even other divs here in each Album]&lt;/div&gt;
        &lt;div id="Album1"&gt;&lt;/div&gt;
        &lt;div id="Album10"&gt;&lt;/div&gt;
        &lt;div id="Album16"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="line"&gt;
        &lt;div id="Album9"&gt;&lt;/div&gt;
        &lt;div id="Album3"&gt;&lt;/div&gt;
        &lt;div id="Album4"&gt;&lt;/div&gt;
        &lt;div id="Album7"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="line"&gt;
        &lt;div id="Album5"&gt;&lt;/div&gt;
        &lt;div id="Album11"&gt;&lt;/div&gt;
        &lt;div id="Album6"&gt;&lt;/div&gt;
        &lt;div id="Album13"&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="line"&gt;
        &lt;div id="Album8"&gt;&lt;/div&gt;
        &lt;div id="Album14"&gt;&lt;/div&gt;
        &lt;div id="Album12"&gt;&lt;/div&gt;
        &lt;div id="Album15"&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this should be my output:</p>
  
  <pre><code>  &lt;div id="products" &gt;
         &lt;div class="line"&gt;
            &lt;div id="Album1"&gt;&lt;/div&gt;
            &lt;div id="Album2"&gt;&lt;/div&gt;
            &lt;div id="Album3"&gt;&lt;/div&gt;
            &lt;div id="Album4"&gt;&lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="line"&gt;
            &lt;div id="Album5"&gt;&lt;/div&gt;
            &lt;div id="Album6"&gt;&lt;/div&gt;
            &lt;div id="Album7"&gt;&lt;/div&gt;
            &lt;div id="Album8"&gt;&lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="line"&gt;
            &lt;div id="Album9"&gt;&lt;/div&gt;
            &lt;div id="Album10"&gt;&lt;/div&gt;
            &lt;div id="Album11"&gt;&lt;/div&gt;
            &lt;div id="Album12"&gt;&lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="line"&gt;
            &lt;div id="Album13"&gt;&lt;/div&gt;
            &lt;div id="Album14"&gt;&lt;/div&gt;
            &lt;div id="Album15"&gt;&lt;/div&gt;
            &lt;div id="Album16"&gt;&lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>But I have one more problem, all my products are listed and there are more than one page, I was actually able to track them and made a sorted Array of Strings but I didn't had the same luck doing it with the DIVs.
  This is my page:
  <a href="http://biscoitofino.jumpseller.com/catalogo" rel="nofollow noreferrer">http://biscoitofino.jumpseller.com/catalogo</a></p>
  
  <p>Any suggestions?
  Thanks in advance.</p>