Создайте и измените тег h1 каждые четыре абзаца (содержание h1 содержит первые десять элементов абзацев)

Question

Так что мне нужно сделать, чтобы создать h1 тег каждые 3 абзаца, поэтому у меня есть 12 абзацев, должно быть 4 h1 тега, каждый из них должен содержать 10 элементов из каждых трех абзацев.

Например,

h1 (содержание будет первым десять элементов каждого пунктов ниже его) P P P h1 P P P и так далее.

То, что я сделал до сих пор:

HTML:

<div id="pastraipos"> 
    <p>Lorem ipsum dolor sit amet..</p> 
    <p>Lorem ipsum dolor sit amet..</p> 
    <p>Lorem ipsum dolor sit amet..</p> 
    <p>Lorem ipsum dolor sit amet..</p> 
    <p>Lorem ipsum dolor sit amet..</p> 
    <p>Lorem ipsum dolor sit amet..</p> 
    <p>Lorem ipsum dolor sit amet..</p> 
    <p>Lorem ipsum dolor sit amet..</p> 
    <p>Lorem ipsum dolor sit amet..</p> 
    <p>Lorem ipsum dolor sit amet..</p> 
    <p>Lorem ipsum dolor sit amet..</p> 
    <p>Lorem ipsum dolor sit amet..</p> 
</div> 

JS:

var parent = document.getElementById("pastraipos"); 
var children = parent.childElementCount; 
    console.log(children); 
for (var i=0; i<children; i=i+3){ 
    var h = document.createElement("H1"); 
    var t = document.createTextNode("Hello World");  
    h.appendChild(t); 
    parent.insertBefore(h, parent.children[i]);  
} 

так что этот код создает 4 элементов h1, присоединяет его к <div id="pastraipos"></div>

Что в этом плохого, что он просто присоединяет ребенка каждые 3 элемента?

Мой результат:

<h1>Hello World</h1> 
<p>Lorem ipsum dolor sit amet..</p> 
<p>Lorem ipsum dolor sit amet..</p> 
<h1>Hello World</h1> 
<p>Lorem ipsum dolor sit amet..</p> 
<p>Lorem ipsum dolor sit amet..</p> 
<h1>Hello World</h1> 
<p>Lorem ipsum dolor sit amet..</p> 
<p>Lorem ipsum dolor sit amet..</p> 
<h1>Hello World</h1> 
<p>Lorem ipsum dolor sit amet..</p> 
<p>Lorem ipsum dolor sit amet..</p> 
<p>Lorem ipsum dolor sit amet..</p> 
<p>Lorem ipsum dolor sit amet..</p> 
<p>Lorem ipsum dolor sit amet..</p> 
<p>Lorem ipsum dolor sit amet..</p> 

Я думаю, что нужно следующий цикл просто, чтобы соответствовать правильный индекс куда добавить, но проблема в том, когда я добавляю к этой петле, второй цикл - это путает, я «Вот так плохо, вот вам и ваша помощь, спасибо.

Answer 1

У вас есть две проблемы здесь. Во-первых, цикл слишком быстро прекращается. Во-вторых, вы неправильно вычисляете позицию для вставки новых элементов.

Причина для обеих проблем одна и та же: вы забываете, что вы обновляете DOM вживую. Каждый вызов insertBefore изменяет DOM и изменяет количество элементов в родительском элементе.

Во-первых, остановка слишком рано. Вы основываете длину цикла на кешированной версии childElementCount. Это неверно. Вы должны основывать его на живой версии, потому что количество элементов продолжает расти. После того, как вставляется первый h1, теперь у вас есть 13 элементов, затем 14, затем 15 и так далее. Если вы просто использовать childElementCount в условном, это работает отлично:

for (var i = 0; i < parent.childElementCount; i = i + 3) { 

Теперь следующая проблема с одной и той же строке кода. Посмотрите на то, что DOM выглядит как после того, как вставляется первый элемент:

h1 
p 
p 
p 
p 
... 

Куда вы хотите вставить следующий h1? Это не после третьего элемента, но после четвертого, что является третьим элементом p. Вам действительно нужно делать i + 4 каждый раз.

Вот рабочий пример:

for (var i = 0; i < parent.childElementCount; i = i + 4) { 

var parent = document.getElementById("pastraipos"); 
 

 
for (var i = 0; i < parent.childElementCount; i = i + 4) { 
 
    var h = document.createElement("H1"); 
 
    var t = document.createTextNode("Hello World"); 
 
    h.appendChild(t); 
 
    parent.insertBefore(h, parent.children[i]); 
 
}

<div id="pastraipos"> 
 
    <p>1</p> 
 
    <p>2</p> 
 
    <p>3</p> 
 
    <p>4</p> 
 
    <p>5</p> 
 
    <p>6</p> 
 
    <p>7</p> 
 
    <p>8</p> 
 
    <p>9</p> 
 
    <p>10</p> 
 
    <p>11</p> 
 
    <p>12</p> 
 
</div>

Answer 2

Для ваших сумм всего 2 исправления: i+=4 и i<=children в вашей петле.

var parent = document.getElementById("pastraipos"); 
var children = parent.childElementCount; 
console.log(children); 
for (var i=0; i<=children; i=i+4){ 
    var h = document.createElement("H1"); 
    var t = document.createTextNode("Hello World");  
    h.appendChild(t); 
    parent.insertBefore(h, parent.children[i]);  
} 

jsfiddle

Answer 3

В вашей DIV вы можете получить все Ps с помощью селектора, затем петлю над ними и вставить h1 после каждого 3 пункт:

function insertHeadings(id) { 
 
    var paras = document.querySelectorAll('#' + id + ' p'); 
 
    for (var h, i=0, iLen=paras.length; i<iLen; i+=3) { 
 
    h = document.createElement('h1'); 
 
    h.appendChild(document.createTextNode('heading ' + i/3)); 
 
    paras[i].parentNode.insertBefore(h, paras[i]); 
 
    } 
 
}

body { 
 
    font-size: 50%; 
 
} 
 
p { 
 
    margin: 0; 
 
}

<div id="d0"> 
 
    <p>p1<p>p2<p>p3<p>p4<p>p5<p>p6<p>p7<p>p8<p>p9<p>p10<p>p11<p>p12 
 
</div> 
 
<button onclick="insertHeadings('d0')">Insert headings</button>