使用JavaScript将一个元素在DOM树中向上或向下移动一个位置

Question

我希望有一种JavaScript的方式，可以在已知特定父元素内，将元素向上或向下移动一个位置（使用JavaScript或jQuery都可以），但是我希望脚本能够确定一个元素是否是父元素中的第一个或最后一个元素，并且不会移动。例如，如果我有以下内容...

<div id='parent_div'>
    <div id='div_1'></div>
    <div id='div_2'></div>
    <div id='div_3'></div>
</div>

点击按钮后，我想传递一个已知的id（比如说div_2），并将它移动到它上面的位置，与先前在它前面的元素（在这种情况下是div_1）交换位置。元素的id不必更改，它们的新位置也不需要知道，除非它们再次移动。

- Peter Cullen

Answer 1

使用jQuery：

var e = $("#div_2");
// move up:
e.prev().insertAfter(e);
// move down:
e.next().insertBefore(e);

- Gavriel

---

谢谢！我可以使用 next() 将其向下移动，然后使用 remove() 删除旧项目。 - Peter Cullen

Answer 2

向上移动element元素：

if(element.previousElementSibling)
  element.parentNode.insertBefore(element, element.previousElementSibling);

向下移动element：

if(element.nextElementSibling)
  element.parentNode.insertBefore(element.nextElementSibling, element);

function moveUp(element) {
  if(element.previousElementSibling)
    element.parentNode.insertBefore(element, element.previousElementSibling);
}
function moveDown(element) {
  if(element.nextElementSibling)
    element.parentNode.insertBefore(element.nextElementSibling, element);
}
document.querySelector('ul').addEventListener('click', function(e) {
  if(e.target.className === 'down') moveDown(e.target.parentNode);
  else if(e.target.className === 'up') moveUp(e.target.parentNode);
});

.up, .down        { cursor: pointer; }
.up:after         { content: '△'; }
.up:hover:after   { content: '▲'; }
.down:after       { content: '▽'; }
.down:hover:after { content: '▼'; }

<ul>
  <li>1<span class="up"></span><span class="down"></span></li>
  <li>2<span class="up"></span><span class="down"></span></li>
  <li>3<span class="up"></span><span class="down"></span></li>
  <li>4<span class="up"></span><span class="down"></span></li>
  <li>5<span class="up"></span><span class="down"></span></li>
</ul>

- Oriol

---

在纯JavaScript中加1 - Robin

Answer 3

您可以使用JQuery内置的.index()方法来获取子元素的位置，然后从父元素中获取.length值，以找出元素数量。

如果index返回0，则为第一个元素；如果index返回父元素长度-1，则为最后一个元素。

要移动元素本身，您可以使用.insertBefore和.prev将元素上移。

    var elm = $("selector_for_the_element");
    elm.insertBefore(elm.prev());

如果要将元素向下移动，则可以使用insertAfter和.next

    var elm = $("selector_for_the_element");
    elm.insertAfter(elm.next());

- DominicValenciana

Answer 4

使用jQuery的$.each函数获取父级div id (#parent_div)下所有子div。假设您想交换div3和div2，则div3的索引为2。使用$(#div_3).insertBefore(#div_2)。

- Jagajit Prusty