title: Reorder html elements in dom
body: <p>I have a list of elements:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="abc"&gt;&lt;/div&gt;
      &lt;div class="abc"&gt;&lt;/div&gt;
      &lt;div class="abc"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I have an array or numbers which represent new order:</p>
  
  <pre><code>var arr = [2,1,0];
  </code></pre>
  
  <p>I would like to reposition these abc divs to new positions inside parent wrapper.</p>
  
  <p>Important thing is that abc divs have events and data attached to them and this needs to be preserved!</p>
  
  <p>I have came up with this and it seems to be working as expected:</p>
  
  <pre><code>var wrapper = $('.wrapper'), items = wrapper.children('div.abc');
  
  var orderedItems = $.map(arr, function(value) {
      return $(items).clone(true,true).get(value);
  });
  wrapper.empty().html(orderedItems);
  </code></pre>
  
  <p>I wanted to make sure this is the right way.</p>
  
  <p>I could do with javascript solution as well if possible.</p>