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

标签 javascript html for-loop dom

所以我有12个段落,这些段落被三个p标签分为四个组。我需要做的是每三个段落获得10个符号(包括空格在内总共30个符号)并将其接触添加到h1标签中,由于3组有12个段落,因此需要执行4次。

 <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上起作用,因为我需要将这两个循环组合在一起?但是我不知道如何。

最佳答案

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

关于javascript - 用30个符号更新每个h1标签(h1标签下面3个段落中的10个符号),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41059968/

相关文章:

javascript - Protractor :Browser.wait() Timeout 在 Jasmine defaultTimeoutInterval 上超时

javascript - jquery数据表在使用x-editable更新行中的值后未排序

javascript - 使用node.js将repetitiv HTML片段导入其他html文件

javascript - 如何在for循环中每3次添加一个换行符

c++ - i++或++ i更适合此程序吗?

python - 无法在python 2.7中迭代元组

javascript - 连接 Raphaël 集

javascript - D3.js:time.scale.utc() 似乎对我没有任何作用?

c# - libtidy .NET 包装器 html5

html - 用于在 IE11 中不可点击的表单中输入的图像标签