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);
}

现在我遇到了将第三个孩子移到第一个孩子下方和第二个孩子上方的问题，所有 page1、page2 和 page3 一起。上面的代码只在 page1 中移动它，但对于其他 2，它什么也不做。源代码中显示的 frame 是存储在同一域中的 iframe，可以访问它的元素。由于我想将每个 div 中的所有第三个孩子移动到每个父 div 中的第一个孩子下方，我能否就我做错了什么获得一些建议？

Answer 1

您遇到的问题是您不断地针对相同的元素，例如

var firstchild = frame.getElementsByClassName('firstchild')[0];

因为该指令总是返回 iframe 中此类元素的第一次出现，而不是第二次或第三次。

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

然后你可以使用类似这样的东西

var firstChild = pageID.querySelector('.firstchild');

它只会搜索包含在某个其他元素中的类 firstchild 的元素（第一次出现）。

检查下方（我将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>