我有一个元素列表：
<div class="wrapper">
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
</div>
我有一个由数字组成的数组，它代表了新的顺序：
var arr = [2,1,0];
我想重新定位这些abc div到父包装器内的新位置。
重要的是，这些abc div有事件和数据附加到它们上面，需要保留！
我已经想出了以下解决方案，并且似乎按预期工作：
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 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/
documentFragment附加到文档中时，它本身会显示为父元素吗？ - oldboy注意，当您添加一个已经存在于 DOM 中的元素时，该元素将被移动，而不是复制。
let wrapper=document.querySelector(".wrapper");
let children=wrapper.children;
let newOrder=[3,2,1,0];
//it means that the first element you want it to be the four element
//The second element you want it to be the third
//the third element you want it to be the second
//the four element you want it to be the first
for(let i=0;i<newOrder.length;i++){
for(let j=0;j<newOrder.length;j++){
if(i==newOrder[j]){
wrapper.appendChild(children[j]);
break;
}
}
}<div class="wrapper">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div><style>
.wrapper {
display: flex;
flex-flow: column;
}
</style>
<div class="wrapper">
<div class="abc">One</div>
<div class="abc">Tow</div>
<div class="abc">Three</div>
</div>
<button id="reorder" type="button">Reorder</button>
<button id="unreorder" type="button">Unreorder</button>
<script>
var reorderButton = document.querySelector('#reorder');
var unreorderButton = document.querySelector('#unreorder');
var abcDivs = document.querySelectorAll('.abc');
var newOrder = [2, 1, 0];
reorderButton.addEventListener('click', function() {
abcDivs.forEach(function(element, index) {
element.style.order = newOrder[index];
});
});
unreorderButton.addEventListener('click', function() {
abcDivs.forEach(function(element, index) {
element.style.order = null;
});
});
</script>
不需要复制所有项目两次。
（这句话涉及到IT技术中的代码复制问题）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] }) );
这个解决方案对我来说更好，我们建立了一个元素数组（[...wrapper.children]），然后根据模型（[5,4,3,2,1,0]）使用 .sort 方法进行排序，然后使用 appendChild。由于元素与原始元素相同，事件监听器仍然正常工作。以下是代码：
//this is just to add event listeners
[...document.getElementsByClassName("abc")].forEach(e =>
e.addEventListener("click", ev => console.log(ev.target.innerText))
);
var wrapper = document.getElementsByClassName("wrapper")[0];
var items = [...wrapper.children];
const newOrder = [5,4,3,2,1,0]
items.sort((a, b)=>newOrder.indexOf(items.indexOf(a)) - newOrder.indexOf(items.indexOf(b)));
items.forEach(it=>wrapper.appendChild(it));<div class="wrapper">
<div class="abc">0</div>
<div class="abc">1</div>
<div class="abc">2</div>
<div class="abc">3</div>
<div class="abc">4</div>
<div class="abc">5</div>
</div>如您所见，如果点击0、1等数字，事件监听器便会起作用。
在阅读了其他人的解决方案后，我创建了一个简单的代码片段来反转被包装在单个容器元素中的
// Select all divs which need to be reordered
const items = document.querySelectorAll("#plan-carousel .plans-carousel .column-holder")
// Create an array of the divs and reverse them
const reverseItems = Array.from(items).reverse()
// Select the parent or wrapper element
const wrapper = document.querySelector("#plan-carousel .plans-carousel")
// Iterate over the reversed array and append each one to the parent element
reverseItems.forEach(item => wrapper.appendChild(item))
参考资料：
appendChild()文章：如果给定的子节点是文档中现有节点的引用，则appendChild()将其从当前位置移动到新位置。换句话说，由于这些项已经存在，当我们添加它们时，它们只是被移动而不是复制。
order进行重新排序：http://www.w3schools.com/cssref/css3_pr_order.asp - RobertAKARobin