title: Reorder DIV's based on element attributes
body: <p>I'm not sure how to go about doing this. Let's say I have the following HTML code:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div class="item" order="5"&gt;&lt;/div&gt;
    &lt;div class="item" order="3"&gt;&lt;/div&gt;
    &lt;div class="item" order="4"&gt;&lt;/div&gt;
    &lt;div class="item" order="1"&gt;&lt;/div&gt;
    &lt;div class="item" order="2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using jQuery, how could I order these divs based on the attribute "order"? By reorder, I mean I would like the dom to update the order of the divs based on the attribute "order". This would naturally adjust the z-index of the divs as well. I know that setting the z-index based on the attribute order will give me the correct display in the browser window, but it won't manipulate the dom order.</p>
  
  <p>I assume I would loop through #container and get the child and its order like so:</p>
  
  <pre><code>$('#container &gt; div').each( function(event) {
     var itemOrder = $(this).attr('order');
  });
  </code></pre>
  
  <p>...but I'm at a loss on how to manipulate the order. Any help would be greatly appreciated.</p>