通过普通 JS 更改元素的索引（顺序）

Question

今天我有一个问题：如何通过纯JS更改元素的索引？我有这个示例代码：

<div class="foo">
    <div class="f6x1"></div>
    <div class="f6x2"></div>
    <div class="f6x3"></div>
</div>

所以我想改变（例如）第一个元素的顺序，像这样：

<div class="foo">
    <div class="f6x2"></div>
    <div class="f6x1"></div>
    <div class="f6x3"></div>
</div>

是否有任何 "non-laging" 示例如何做到这一点？

Answer 1

您需要 select 个元素并将其移动到第二个之后的下一个元素之前：

var first = document.querySelector('.f6x1'),
    next  = first.nextElementSibling;

first.parentNode.insertBefore(first, next.nextElementSibling);

<div class="foo">
    <div class="f6x1">1</div>
    <div class="f6x2">2</div>
    <div class="f6x3">3</div>
</div>

参考：

Answer 2

按您需要的任何顺序对元素进行排序的更通用的方法：

首先，使用 data-*-属性开始索引：

<div class="foo">
    <div data-index="1" class="f6x1"></div>
    <div data-index="2" class="f6x2"></div>
    <div data-index="3" class="f6x3"></div>
</div>

其次，使用函数重新排序，例如：

var sortElement = document.querySelector('[data-sortable]');

document.querySelector('#buttonblock').addEventListener('click', doSort);

function doSort(e) {
  var origin = e.target || e.srcElement;
  if (/button/i.test(origin.nodeName)) {
    var sortorder = origin.getAttribute('data-order').split(',');
    orderElements(sortElement, sortorder);
  }
  return true;
}

function orderElements(elementRoot, order) {
  var placeholder = document.createElement('div');
  while(order.length) {
    var current = order.shift();
    var element = elementRoot.querySelector('[data-index="'+current+'"]');
    if (element) {
     placeholder.appendChild(element);
    }
  }
  elementRoot.innerHTML = '';
  elementRoot.innerHTML = placeholder.innerHTML;
}

<div data-sortable="true" class="foo">
  <div data-index="1" class="f6x1">f6x1</div>
  <div data-index="2" class="f6x2">f6x2</div>
  <div data-index="3" class="f6x3">f6x3</div>
</div>

<div id="buttonblock">
  <button data-order="2,1,3">sort 2, 1, 3</button>
  <button data-order="3,2,1">sort 3, 2, 1</button>
  <button data-order="3,1,2">sort 3, 1, 2</button>
</div>

通过普通 JS 更改元素的索引（顺序）

Change index (order) of elements via plain JS

javascript

dom