Reorder html elements in dom
<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>