使用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：

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

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> 

Answer 3

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

如果index返回0，则它是第一个元素，如果index返回父元素长度-1，那么您知道它是最后一个元素。

对于移动的元素他们的自我，你可以使用.insertBefore和.prev移动元素了。

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

要将elemetn向下移动，可以使用insertAfter和.next

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

Answer 4

使用jQuery的$ .each函数获取父div div（#parent_div）的所有子div。 假设您要将div3与div2交换，则div3的索引将为2.使用$（＃div_3）.insertBefore（#div_2）