javascript - 试图在 Javascript 中滚动 insertAfter() 的奇怪行为

Question

我有一堆 class="section" div，我想用它们里面的向上/向下按钮移动它们。向上按钮工作正常，但向下按钮我必须按两次才能让 div 向下移动一个点。无法理解它。这在 Firefox 和 Chrome 中是一样的。

我做错了什么？

HTML:

<div class="section">
 .  
 .  //content goes here  
 .
  <button class="up" type="button">up</button>
  <button class="down" type="button">down</button>
</div>

Javascript

//event listeners  
var classup = document.getElementsByClassName("up");
var classdown = document.getElementsByClassName("down");
for (var i=0; i<classup.length; i++) {
    classup[i].addEventListener('click', upf, false);
    classdown[i].addEventListener('click', downf, false);
}

//functions

function downf() {
    var temp = this.parentNode;
    temp.parentNode.insertBefore(temp, temp.nextSibling.nextSibling);
}

function upf() {
    var temp = this.parentNode;
    temp.parentNode.insertBefore(temp, temp.previousElementSibling);
}

Answer 1

您使用的是 .nextSibling 而不是 .nextElementSibling。单击 down 时，这会将您的部分移动到以下空白文本节点之后。

function downf() {
    var section = this.parentNode;
    if (section.nextElementSibling)
        section.parentNode.insertBefore(section, section.nextElementSibling.nextElementSibling);
}