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）

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

4 个答案: