在dom中重新排序html元素

我有一个元素列表:

我有一个或多个代表新订单的数字:

var arr = [2,1,0];

我想将这些abc div重新定位到父包装器中的新位置.

重要的是abc divs附加了事件和数据,这需要保留!

我想出了这个,似乎按预期工作:

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);

我想确保这是正确的方法.

如果可能的话,我也可以使用javascript解决方案.

无需复制所有项目..两次

var wrapper = $('.wrapper'), 
    items = wrapper.children('.abc'),
    arr = [2,1,0];

//items.detach(); if arr doesn't reuse all items
wrapper.append( $.map(arr, function(v){ return items[v] }) );

如果您想要一个纯Javascript解决方案（不涉及jQuery）

var arr = [2,1,0];
var wrapper = document.getElementsByClassName("wrapper");
var items = wrapper[0].children;
var elements = document.createDocumentFragment();

arr.forEach(function(idx) {
    elements.appendChild(items[idx].cloneNode(true));
});

wrapper[0].innerHTML = null;
wrapper[0].appendChild(elements);

我以前的回答有些改进。小提琴：https : //jsfiddle.net/jltorresm/1ukhzbg2/2/