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

Question

我想要一种 javascript 方法来使用 javascript（或 jquery 将元素在特定已知父级的 dom 树中向上或向下移动一个位置好的），但我希望脚本知道元素何时是父元素中的第一个或最后一个元素并且不被移动。例如，如果我有以下 ...

<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 不必更改，并且不需要知道它们的新位置，至少除非再次移动它们。

Answer 1

您可以使用 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());

Answer 2

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

Answer 3

与jQuery:

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

Answer 4

移动 element "up":

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

移动 element "down":

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>

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

Move an element one place up or down in the dom tree with javascript

javascript

jquery

dom

move