对dom中的html元素重新排序

Question

我有一个元素列表：

<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 解决方案。

Answer 1

如果您想要纯 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/

Answer 2

请记住，当您添加一个已经在 DOM 中的元素时，该元素将被移动，而不是复制。

CodePen

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>

Answer 3

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

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

Answer 4

我知道这是一个老问题，但谷歌将我引向了它。 flexbox (css) 上有一个名为“order”的子属性，允许您选择元素显示的顺序。可以使用 javascript 来更改此子属性并重新排序显示的元素。

https://www.w3schools.com/cssref/css3_pr_order.asp

编辑 1 - 代码示例：

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

Answer 5

这个解决方案对我来说效果更好，我们构建一个元素数组 ([...wrapper.children]) 然后我们使用基于模型 ([5,4,3,2,1,0]) 的 .sort 然后我们使用追加子。由于元素与原始元素相同，因此事件侦听器仍然可以正常工作。代码如下：

//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 等，事件侦听器将起作用。