Question

我需要做的是每3段创建一个h1标签，所以我有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) {

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

对于您的金额，只需2个修正：{for循环中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，然后循环它们并在每个第3段之后插入一个h1：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

每四段创建和更改h1标记（h1内容包含段落的前十个元素）

3 个答案: