Why at a loop insertBefore adds all three elements to one place

Question

There are 3 blocks with a width of 8 columns ( news class) and 3 blocks with a width of 4 columns ( posts class).

With a width of less than 992 pixels, each column of the posts class needs to be aligned AFTER each column of news

And here all three elements will be aligned in one place after the second column of the news block.

Why is this happening, I do not understand.

Help please solve this problem.

Codepen link

 document.addEventListener("DOMContentLoaded", () => { let w = window.innerWidth; // ширина окна let lastPosts = document.querySelectorAll(".last_posts"); //все колонки внутри блока posts let newsInfo = document.querySelectorAll(".news_info"); // все колонки внутри блока news let news = document.querySelector(".news"); //блок news if(w <= 992){ //если ширина меньше 992 то for(let i =0;i < lastPosts.length;i++){ for(let j = 0;j < newsInfo.length;j++){ news.insertBefore(lastPosts[i], newsInfo[j]); //вставляем в блок news колонку lastPosts с [индексом который указывает массив] до элемента newsInfo[также индекс который указывает массив] } } } }) //аналогичная функцию с resize можете не посмотреть даже window.onresize = () => { let w = window.innerWidth; let lastPosts = document.querySelectorAll(".last_posts"); let newsInfo = document.querySelectorAll(".news_info"); let news = document.querySelector(".news"); let posts = document.querySelector(".posts"); if(w <= 992){ for(let i =0;i < lastPosts.length;i++){ for(let j = 0;j < newsInfo.length;j++){ news.insertBefore(lastPosts[i], newsInfo[j]); } } } else if (w > 992){ for(let i =0;i < lastPosts.length;i++){ posts.insertBefore(lastPosts[i], null); } } }

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container no-padding"> <div class="row"> <div class="news col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8"> <h6 class="news_title">News</h6> <div class="news_info"> <div class="statue_liberty"> <img src=""> </div> <div class="post_title">Discover Milan's religious sites</div> <p class="post_briefly">Canadian-born and educated Jamie Fobert has practiced architecture in England for 30 years, first under David Chipperfield and then, since 1995, as head of his own firm. During that time, he has quietly built a…</p> <div class="button-container-4"> <span class="mas_">Read more &rarr;</span> <button type="button" name="Hover">Read more &rarr;</button> </div> </div> <div class="news_info"> <div class="statue_liberty"> <img src=""> </div> <div class="post_title">Discover Milan's religious sites</div> <p class="post_briefly">Canadian-born and educated Jamie Fobert has practiced architecture in England for 30 years, first under David Chipperfield and then, since 1995, as head of his own firm. During that time, he has quietly built a…</p> <div class="button-container-4"> <span class="mas_">Read more &rarr;</span> <button type="button" name="Hover">Read more &rarr;</button> </div> </div> <div class="news_info"> <div class="statue_liberty"> <img src=""> </div> <div class="post_title">Discover Milan's religious sites</div> <p class="post_briefly">Canadian-born and educated Jamie Fobert has practiced architecture in England for 30 years, first under David Chipperfield and then, since 1995, as head of his own firm. During that time, he has quietly built a…</p> <div class="button-container-4"> <span class="mas_">Read more &rarr;</span> <button type="button" name="Hover">Read more &rarr;</button> </div> </div> </div> <div class="posts col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"> <div class="last_posts"> <h3 class="last_post_title">Discover Milan's religious sites</h3> <p class="latest_post_briefly">Canadian-born and educated Jamie Fobert has practiced architecture in England for 30 years, first …</p> <a href="javascript:void(0)">Read</a> </div> <div class="last_posts"> <h3 class="last_post_title">Discover Milan's religious sites</h3> <p class="latest_post_briefly">Canadian-born and educated Jamie Fobert has practiced architecture in England for 30 years, first …</p> <a href="javascript:void(0)">Read</a> </div> <div class="last_posts"> <h3 class="last_post_title">Discover Milan's religious sites</h3> <p class="latest_post_briefly">Canadian-born and educated Jamie Fobert has practiced architecture in England for 30 years, first …</p> <a href="javascript:void(0)">Read</a> </div> </div> </div> </div>

Demon __ ANT 559 five nineteen · Accepted Answer · 2018-05-25T11:22:06

Most likely you have an error in the logic of the cycle:

 for(let i =0;i < lastPosts.length;i++){ for(let j = 0;j < newsInfo.length;j++){ news.insertBefore(lastPosts[i], newsInfo[j]); } }

inside your nested loop, you insert the same element first before newsInfo[0] , then the value of i does not change and you insert the same lastPost[i] element (move) just before newsInfo[1] and so on .. that is, the same block is stupidly moved several times, and at the end of the nested loop it remains before the last newsInfo[]

As far as I understand you, the number of lastPost is equal to the number of newsInfo, then you, if I understand your logic, you need to use one cycle, but this will be only if their number coincides, otherwise you must add more checks

 for(let i =0;i < lastPosts.length;i++){ news.insertBefore(lastPosts[i], newsInfo[i]); }

so I answered the question posed: "Why does the loop insertBefore add all three elements to one place?"
people .. programmers get s / n for what they do themselves.

Why at a loop insertBefore adds all three elements to one place

1 answer 1

More articles: