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

Posted 2023-02-16

【中文标题】使用javascript在dom树中向上或向下移动一个元素

【英文标题】：Move an element one place up or down in the dom tree with javascript

【发布时间】：2016-04-27 02:52:48

【问题描述】：

我想要一种 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）并将其移动到它上面的位置，将它的位置与之前的元素交换（在这种情况下为@987654323 @)。元素的 id 不必改变，也不必知道它们的新位置，至少除非它们再次移动，否则不必知道。

【参考方案1】：

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

【讨论】：

原版 JavaScript 加 1

【参考方案2】：

使用 jQuery：

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

【讨论】：

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

【参考方案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());

【参考方案4】：

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