用 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

H_ello f_riend，我不太确定我是否完全理解你，但你可以检查一下这段代码是否对你有帮助 -> 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();
    }
  }
}

Answer 2

只能用js和dom做，可惜没有css

这里有两个解决方案。一种使用javascript，一种使用css。该脚本在每个第三段 (p) 之后创建一个标题 (h1) 标记，并在其中显示之前每个段落的前十个字符：

<html>
    <head>
        <script>
            //Creating dummy data
            function createDummyData(){
                var tF = document.createDocumentFragment();
                for(var i=0, j=100; i<j; i++){
                    var tP = tF.appendChild(document.createElement('p'));
                    tP.innerHTML = 'Line' + i + ': and some more characters'
                };

                document.querySelector('div').appendChild(tF)
            }

            window.onload = function(){
                createDummyData(); //Creating summy data

                //Looping though all the paragraphs
                for(var tA=[], tL=document.querySelectorAll('.Blubb p'), i=0, j=tL.length; i<j; i++){
                    //Store the first ten characters
                    tA.push(tL[i].textContent.substr(0, 10));

                    //Each tenths step..
                    if((i + 1)%3 === 0){
                        //A header gets inserted
                        var tH = document.createElement('h1');
                        tH.innerHTML = tA.join('.. ');
                        tL[i].parentNode.insertBefore(tH, tL[i].nextSibling);
                        tA = [] //Empty the characters
                    }
                }
            }
        </script>

        <style>
            /* Alternativly this is a simple solution by merely using css, here marking each third element */
            .Blubb p:nth-of-type(3n+3):after{
                content: 'thid element reached by css';
                color: red
            }
        </style>
    </head>

    <body>
        <div class = 'Blubb'>
            <!-- Created by dummy -->
        </div>
    </body>
</html>

https://jsfiddle.net/9shfo5ge/2/