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>

有没有＆＃34;非laging＆＃34;示例如何做到这一点？

Answer 1

您需要选择元素并在第二个元素之后的下一个元素之前移动它：

＆＃13;

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

＆＃13;

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

＆＃13;

参考：

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更改元素的索引（顺序）

2 个答案: