Javascript 使用javascript将元素在dom树中向上或向下移动一个位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34913953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move an element one place up or down in the dom tree with javascript
提问by Peter Cullen
I want a javascript way to move an element one place up or down in the dom tree within a particular known parent using javascript (or jquery is ok), but i want the script to know when an element is the first or last element within the parent and not be moved. for example, if i have the following ...
我想要一种 javascript 方法，使用 javascript（或 jquery 可以）在特定已知父级内的 dom 树中向上或向下移动一个元素，但我希望脚本知道元素何时是第一个或最后一个元素父而不会被移动。例如，如果我有以下...
<div id='parent_div'>
<div id='div_1'></div>
<div id='div_2'></div>
<div id='div_3'></div>
</div>
on click of a button, i want to pass a known id (let's say div_2) and move it up to the position above it, swapping its position with the element that was previously before it (in this case div_1). The ids of the elements don't have to change, and their new position doesn't need to be known, at least not unless they are moved again.
单击按钮时，我想传递一个已知 id（假设div_2）并将其向上移动到其上方的位置，将其位置与其之前的元素交换（在本例中div_1）。元素的 id 不必更改，并且不需要知道它们的新位置，至少除非再次移动它们，否则不需要知道。
回答by Gavriel
With jQuery:
使用 jQuery：
var e = $("#div_2");
// move up:
e.prev().insertAfter(e);
// move down:
e.next().insertBefore(e);
回答by Oriol
Move element"up":
移动element“上”：
if(element.previousElementSibling)
element.parentNode.insertBefore(element, element.previousElementSibling);
Move element"down":
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>回答by DominicValenciana
You can use JQuery's built in .index()method to get the location of a child element and get the .lengthvalue form a parent element to find out the number of elements.
您可以使用 JQuery 的内置.index()方法来获取子元素的位置并从.length父元素获取值以找出元素的数量。
If indexcomes back 0, it is the first element, if the indexcomes back parent element length -1 then you know it is the last element.
如果index返回 0，则它是第一个元素，如果index返回父元素长度为 -1，则您知道它是最后一个元素。
For moving the elements them self you can use .insertBeforeand .prevto move an element up.
为了移动它们自己的元素，您可以使用.insertBefore并向.prev上移动元素。
var elm = $("selector_for_the_element");
elm.insertBefore(elm.prev());
For moving an elemetn down then you can use insertAfterand .next
为了向下移动一个元素，你可以使用insertAfter和.next
var elm = $("selector_for_the_element");
elm.insertAfter(elm.next());
回答by Jagajit Prusty
Get all the child div with parent div id (#parent_div) using $.each function of jQuery. suppose you want to swap div3 with div2, then index of div3 will be 2. use $(#div_3).insertBefore(#div_2)
使用 jQuery 的 $.each 函数获取所有具有父 div id (#parent_div) 的子 div。假设您想将 div3 与 div2 交换，那么 div3 的索引将为 2。使用 $(#div_3).insertBefore(#div_2)
