javascript - 用 30 个符号更新每个 h1 标签(h1 标签下方 3 个段落中的 10 个符号)

Question

所以我有 12 个段落，这些段落被三个 p 标签分成四组。我需要做的是每三段取10个符号(包括空格总共30个符号)并将其联系人添加到h1标签，需要这样做4次，因为有3组12段。

 <div id="pastraipos">
 <h1></h1>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>it is a long established fact that a reader will be distracted.</p>
 <p>There are many variations of passages of Lorem Ipsum available.</p>
 <h1></h1>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <h1></h1>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <h1></h1>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 </div>

html代码中没有h1标签，我只是给你写的，所以它可能更清楚，因为我很难解释。 所以有代码，我每 3 个段落添加 h1 标签:-

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"); //there should be no hello world it should contain 30 symbols from three paragraphs (10 from each including space)    
h.appendChild(t);
parent.insertBefore(h, parent.children[i]);    
}

这是我编写的代码，用于获取每三段的 10 个符号

 for (j=0; j<3; j++){
 var str = document.getElementsByTagName("p")[j].textContent;
 console.log(str);
 var res = str.substring(0, 10);
 console.log(res); 
    var labas = labas + res;
 }
 var s = document.createElement("H1"); 
 var t = document.createTextNode(labas);    
 s.appendChild(t);
 parent.appendChild(s);

这应该出现在第一个 h1

<h1>is simply it is a lot here are </h1>(30 elements total)

所以我有代码，每 3 个段落添加 h1 标签，我有一些代码，从 3 个段落收集 10 个符号并将文本添加到 h1，遗憾的是它只适用于第一个 h1，因为不知何故我需要结合这两个循环？但我不知道怎么办。

Answer 1

你好 friend ，我不太确定我是否完全理解你，但你可以检查一下这段代码是否对你有帮助 -> http://codepen.io/anon/pen/BQPygr?editors=1010

HTML:

<button onclick="doWork()">Run Function</button>
<button onclick="clearH1()">Reset</button>

<div id="pastraipos">
 <h1></h1>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>it is a long established fact that a reader will be distracted.</p>
 <p>There are many variations of passages of Lorem Ipsum available.</p>
 <h1></h1>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <h1></h1>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <h1></h1>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 </div>

JS:

function doWork() {
  /* get all elements from the parent div */
  var children = document.getElementById('pastraipos').childNodes;
  var childrenLen = children.length;
  var childrenText = '';

  /* reverse loop */
  for (var i = children.length - 1; i >= 0; i--) {
    if (children[i].tagName === 'H1') {
      /* if element is <h1> set collected text */
      children[i].innerHTML = childrenText;
      childrenText = '';
    } else {
      /* assume element is <p> then get first 10 characters */
      childrenText += children[i].textContent.substr(0, 10);
    }
  }
}

function clearH1(){
  var children = document.getElementById('pastraipos').childNodes;
  for (var i = children.length - 1; i >= 0; i--) {
    if (children[i].tagName === 'H1') {
      children[i].innerHTML = '';
    }
  }
}

更新

HTML:

<button onclick="doWork()">Run Function</button>
<button onclick="clearH1()">Reset</button>

<div id="pastraipos">
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>it is a long established fact that a reader will be distracted.</p>
 <p>There are many variations of passages of Lorem Ipsum available.</p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 <p>is simply dummy text of the printing and typesetting industry. </p>
 </div>

JS:

Element.prototype.remove = function() {
  this.parentElement.removeChild(this);
}

function doWork() {
  var parent = document.getElementById('pastraipos');
  var children = parent.childNodes;
  var childrenLen = children.length;
  var childrenText = '';
  var counter = 0;
  for (var i = children.length - 1; i >= 0; i--) {
    if (counter === 3) {
      var h1Element = document.createElement('h1');
      h1Element.appendChild(document.createTextNode(childrenText));
      parent.insertBefore(h1Element, children[i]);
      childrenText = '';
      counter = 0;
    } else if(children[i].tagName === 'P') {
      childrenText += children[i].textContent.substr(0, 10);
      counter++;
    }

  }
}

function clearH1() {
  var children = document.getElementById('pastraipos').childNodes;
  for (var i = children.length - 1; i >= 0; i--) {
    if (children[i].tagName === 'H1') {
      children[i].remove();
    }
  }
}