for循环中的香草Javascript insertBefore（）

Question

我具有以下html结构。

<div id="page1" class="page">
    <div class="firstchild"></div>
    <div class="secondchild"></div>
    <div class="thirdchild"></div>
    <div class="forthchild"></div>
</div>
<div id="page2" class="page">
    <div class="firstchild"></div>
    <div class="secondchild"></div>
    <div class="thirdchild"></div>
    <div class="forthchild"></div>
</div>
<div id="page3" class="page">
    <div class="firstchild"></div>
    <div class="secondchild"></div>
    <div class="thirdchild"></div>
    <div class="forthchild"></div>
</div>

我的JavaScript结构是。

var pageCLASS = frame.querySelectorAll(".page");
//var pageCLASS = frame.getElementsByClassName('page')[0];
var leng = pageCLASS.length;
for (var i = 0; i < leng; ++i) {
    var pageID = frame.getElementById('page' + (i + 1));
    var firstchild = frame.getElementsByClassName('firstchild')[0];
    var secondchild = frame.getElementsByClassName('secondchild')[0];   
    var thirdchild = frame.getElementsByClassName('thirdchild')[0];
    pageID.insertBefore(thirdchild, firstchild.nextSibling);
    //pageCLASS.insertBefore(thirdchild, firstchild.nextSibling);
}

现在，我在将第三个，第1个，第2个和第3个页面中的第三个孩子都移到第一个孩子之下和第二个孩子之上时遇到问题。上面的代码仅将其移至第1页，而其他2则不执行任何操作。源中显示的frame是存储在同一域中的iframe，可以访问其元素。我想将每个div中的所有第三个孩子移动到其父div中的第一个孩子下面时，请问我做错了什么建议？

Answer 1

您遇到的问题是，您不断使用例如相同的元素作为目标。>

var firstchild = frame.getElementsByClassName('firstchild')[0];
因为此指令总是返回iframe中此类元素的第一次出现，而不会返回第二或第三次出现。

为了确保您定位的是正确的元素，您可以重写某些代码以仅搜索某个父对象中包含的元素，而不是整个iframe中的元素。

然后您可以使用类似的方法

var firstChild = pageID.querySelector('.firstchild');
将仅搜索包含在其他元素（在这种情况下为保存在firstchild中的元素中）的类为pageID的元素（第一次出现）。

在下面检查（我将form交换为document，所以我们可以在这里进行测试）：

var pageCLASS = document.querySelectorAll(".page");
var leng = pageCLASS.length;

for (var i = 1; i <= leng; i++) {
    var pageID = document.getElementById('page' + i);
    var firstChild = pageID.querySelector('.firstchild');
    var thirdChild = pageID.querySelector('.thirdchild');
    firstChild.parentNode.insertBefore(thirdChild, firstChild.nextSibling);
}
.page {
  border: 1px solid #09f;
}
<div id="page1" class="page">
    <div class="firstchild">first child</div>
    <div class="secondchild">second child</div>
    <div class="thirdchild">third child</div>
    <div class="forthchild">fourth child</div>
</div>
<div id="page2" class="page">
    <div class="firstchild">first child</div>
    <div class="secondchild">second child</div>
    <div class="thirdchild">third child</div>
    <div class="forthchild">fourth child</div>
</div>
<div id="page3" class="page">
    <div class="firstchild">first child</div>
    <div class="secondchild">second child</div>
    <div class="thirdchild">third child</div>
    <div class="forthchild">fourth child</div>
</div>