香草 Javascript insertBefore() in for 循环

Question

I have the following html structure.

<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>

And my javascript structure is.

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

Now I have problems with the thirdchild being moved to below the firstchild and above the secondchild in all of page1, page2, and page3 together. The code above only moves it in page1, but for the other 2 which does nothing. The frame shown in the source is an iframe stored on the same domain with access to it's elements. Can I please get some advice on what I am doing wrong as I want to move all thirdchilds in each div to below the first child in each of their parent div?

Answer 1

The problem you are having is that you are constantly targeting the same elements with eg

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

because this instruction always returns the first occurrence of such an element in the iframe and never the second or third.

In order to be sure that you are targeting the correct elements you can rewrite some of your code to only search for the elements that are contained within a certain parent and not inside the whole iframe .

You can then use something like this instead

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

which will only search for an element (the first occurrence) with class firstchild that is contained within some other element (in this case the element saved in pageID ).

Check below (I exchanged the form for document so we can test here):

 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>