Ваниль Javascript insertBefore () в течение цикла - PullRequest
Новая
       5

Ваниль Javascript insertBefore () в течение цикла

1 голос
/ 18 апреля 2020

У меня есть следующая структура 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?

1 Ответ

0 голосов
/ 18 апреля 2020

Проблема, с которой вы столкнулись, заключается в том, что вы постоянно нацеливаетесь на одни и те же элементы, например, 

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