for循环中的Vanilla Javascript insertBefore（）

我有下面的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);
}

var pageCLASS=frame.queryselectoral（“.page”）；
//var pageCLASS=frame.getElementsByClassName（'page'）[0]；
var leng=pageCLASS.length；
对于（变量i=0；i

---

现在我有问题，第三个孩子被移动到第一个孩子下面，第二个孩子上面，在所有的第1页，第2页和第3页一起。上面的代码只在第1页中移动它，但对于其他2页，它什么也不做。源中显示的帧是一个iframe，存储在同一个域中，可以访问其元素。当我想将每个分区中的第三个孩子移动到每个父分区中第一个孩子的下方时，我能就我做错了什么获得一些建议吗？

您遇到的问题是，您经常使用相同的元素，例如

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

因为此指令始终返回

iframe

中此类元素的第一次出现，而从不返回第二次或第三次出现

为了确保您针对的是正确的元素，您可以重写一些代码，只搜索包含在某个父级中的元素，而不是整个

iframe

中的元素

然后你可以用类似这样的东西来代替

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

它将只搜索包含在某个其他元素中的类为

firstchild

的元素（第一次出现）（在本例中，该元素保存在

pageID

中）

检查以下内容（我将

表单

交换为

文档

，因此我们可以在这里进行测试）：

var pageCLASS=document.queryselectoral（“.page”）；
var leng=pageCLASS.length；
对于（var i=1；i而言，您面临的问题是，您不断地以相同的元素为目标，例如

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

因为此指令始终返回
iframe
中此类元素的第一次出现，而从不返回第二次或第三次出现

为了确保您针对的是正确的元素，您可以重写一些代码，只搜索包含在某个父级中的元素，而不是整个
iframe
中的元素

然后你可以用类似这样的东西来代替

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

它将只搜索包含在某个其他元素中的类为
firstchild
的元素（第一次出现）（在本例中，该元素保存在
pageID
中）

检查以下内容（我将
表单
交换为
文档
，因此我们可以在这里进行测试）：


var pageCLASS=document.queryselectoral（“.page”）；
var leng=pageCLASS.length；
对于（var i=1；我非常感谢您的解释。我已经通过了许多解决方案，但在第二个/第三个div上却没有成功。在将您的解决方案实现到我的代码中之后，我在web控制台中得到了“thridchild is null”，这就是为什么div不会被移动到“firstchild is null”的原因…不是ThirdChild我把它整理好了。谢谢。你的答案很准确。我只是把错误的eventListener包括进去了。非常感谢你的解释。我已经通过了很多解决方案，但在第二/第三部分却没有成功。在我的代码中实现了你的解决方案后，我得到了“ThirdChild为null”在网络控制台中，这就是为什么div不会被移动“firstchild为null”…而不是thirdchildI将其排序。谢谢。你的答案是正确的。我只是包含了错误的eventListener。