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

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

CheckBox

因为该指令总是返回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;
}

循环中的香草Javascript insertBefore（）

1 个答案: