仅为第三个div添加元素，之后每五个div

Question

我有一篇文章，其中包含一堆paragraphs。在第三个paragraph之后，我需要添加一个广告位。之后，每五段添加一个广告位。我试图用这些HTML tags来模仿我想要完成的事情。

for(var i = 0; i<tasks.length; i++){ 
 
    if(tasks[i].tagName == 'DIV'){ 
 
    if (i && (i % 5 == 0)) { 
 
     //Logic to add elements go here 
 
    } 
 
    } 
 
}

<div>1</div> 
 
<div>2</div> 
 
<div>3(Here is where the element will be added)</div> 
 
<div>4</div> 
 
<div>5</div> 
 
<div>6</div> 
 
<div>7</div> 
 
<div>8(Here is where the element will be added)</div> 
 

 

Answer 1

获取所有的div元素，然后遍历它们，启动从第二索引循环，然后递增5

var div = document.getElementsByTagName('div'); 
 

 
for(var i = 2; i<div.length; i += 5){ 
 
    let para = document.createElement("P"); 
 
    let t = document.createTextNode("new content"); 
 
    para.appendChild(t); 
 
    //div[i].after(para); this is experimental feature, might not be supported in all the browsers 
 
    div[i].parentNode.insertBefore(para, div[i].nextSibling); 
 
}

<div>1</div> 
 
<div>2</div> 
 
<div>3(Here is where the element will be added)</div> 
 
<div>4</div> 
 
<div>5</div> 
 
<div>6</div> 
 
<div>7</div> 
 
<div>8(Here is where the element will be added)</div>

步骤

Answer 2

您可以使用nth-child()选择器并设置5n + 3其是从3 DEMO

document.querySelectorAll('div:nth-child(5n + 3)') 

Answer 3

那么每5个元素，简单地令i是基于零的，则加一个偏移量：

var tasks = document.body.children; 
var off = 2; 
for(var i = 0; i < tasks.length - off; i++){ 
    if(tasks[i+off].tagName == 'DIV'){ 
    if (!(i % 5)) { 
     tasks[i+off].innerHTML += "sth"; 
    } 
    }