在每个 X div 之后插入额外的 div

Question

我刚开始学习JS，所以请不要笑:)。

我被困在一个简单的任务上。 我应该计算特定的 div，并在每个 X div 之后插入另一个 div，其中包含一个段落。 全部采用纯 JavaScript。

我完成了对特定 div 的计数，但我不知道如何处理循环并插入容器和段落。

<div class="main">
  <div class="special-div">div 1</div>
  <div class="special-div">div 1</div>
  <div class="special-div">div 1</div>
</div>
<script>
   count = document.getElementsByClassName("special-div").length; // Output: X
</script>

有什么建议吗？ 感谢您的每一个帮助！

Answer 1

一个基本的 for 语句将适合这个问题。

1. 使用querySelectorAll而不是getElementsByClassName因为它更易于管理 - QSA 返回一个类似数组的 static 节点列表，而 gEBCN 返回一个实时 HTML 集合，当您在其迭代期间开始插入新元素时，这可能会让您绊倒。

2. 要找出应该在哪里添加新的 div 元素，请使用余数运算符（也称为“模”）。 当您遍历节点列表时，请检查当前索引 + 1（数组从零开始）除以指定数字是否会导致零。 如果是这样，请在当前元素after添加新的 div 元素。

注意：为了简单起见，我将创建新 div 元素的代码分离到 function 中。

 const divs = document.querySelectorAll('.special-div'); // Loop over the array-like structure that // qsa returns. Find the remainder of dividing // the index by the supplied `n` argument. If it's // zero create a new div element and add it `after` // the current div function insertAfter(n, text) { for (let i = 0; i < divs.length; i++) { if ((i + 1) % n === 0) { const div = createDiv(text); divs[i].after(div); } } } // For convenience a function that creates // a new paragragh element wrapped in a div. // It uses the text passed in as an argument function createDiv(text) { const div = document.createElement('div'); div.className = 'special-div'; const para = document.createElement('p'); para.textContent = 'new;'. div;appendChild(para); return div. } // Call the main function, The arguments are // the count where you add a new div, and the // text you want to appear in the paragraph insertAfter(2; 'new!');

 div.special-div p { color: red; }

 <div class="main"> <div class="special-div">one</div> <div class="special-div">two</div> <div class="special-div">three</div> <div class="special-div">four</div> <div class="special-div">five</div> <div class="special-div">six</div> </div>

Answer 2

这将使用special-div class 迭代节点，跟踪索引。 对于可按interval整除的非零索引，它会创建并插入一个新的 div。

 const interval = 3; const parent = document.getElementById("parent"); const elements = [...document.getElementsByClassName("special-div")]; const divWithText = text => { const newNode = document.createElement("div"); newNode.appendChild(document.createTextNode(text)); return newNode }; elements.forEach((node,i) => { if (i && i % interval === 0) { parent.insertBefore(divWithText("new div"), node); } });

 <div id="parent" class="main"> <div class="special-div">div 1</div> <div class="special-div">div 1</div> <div class="special-div">div 1</div> <div class="special-div">div 1</div> <div class="special-div">div 1</div> <div class="special-div">div 1</div> <div class="special-div">div 1</div> <div class="special-div">div 1</div> <div class="special-div">div 1</div> <div class="special-div">div 1</div> <div class="special-div">div 1</div> <div class="special-div">div 1</div> </div>

Answer 3

抱歉，我不太确定您期望的 output 是什么样的。

使用.insertAdjacentHTML(<position>, <text>)怎么样？ 它将 HTML 代码插入到指定元素。 你不需要计算 div :)

• element.insertAdjacentHTML()

  • 您可以通过更改我的代码中的main等element来选择目标元素。

• position： 'beforeend'

  • 这意味着“就在元素内部，在它的最后一个子元素之后”。
  • 在示例 1 的情况下，就在.main的</div>之前

• position： 'afterend'

  • 这意味着“在元素之后。仅当元素在 DOM 树中并且具有父元素时才有效。”
  • 在示例 2 的情况下，就在.special-div的</div>之后

• Element.insertAdjacentHTML() @MDN

示例 1

 const main = document.querySelector('.main'); let html = ` <div> <p>new</p> </div> ` // Insert html at the end of all children of.main main.insertAdjacentHTML('beforeend', html);

 <div class="main"> <div class="special-div">div 1</div> <div class="special-div">div 1</div> <div class="special-div">div 1</div> </div>

示例 2

 const targetDivs = document.querySelectorAll('.special-div'); let html = ` <div> <p>new</p> </div> ` // Insert html after every specific div targetDivs.forEach(div => div.insertAdjacentHTML('afterend', html)); // you can't do this: targetDivs.insertAdjacent() // Because targetDivs is a NodeList which is like an array []. // You have to use.insertAdjacent() on every div one by one, // not on an array(NodeList)

 <div class="main"> <div class="special-div">div 1</div> <hr> <div>Ignore this div</div> <hr> <div class="special-div">div 1</div> <hr> <div class="special-div">div 1</div> </div>

Answer 4

你可以这样尝试：

var divs = document.getElementsByClassName('special-divs');
var afterHowMany= 5;

for( var i = 0; i < divs.length; i+=afterHowMany )
    divs.slice(i,i+afterHowMany).wrapAll('<div class="inserted-div"></div>');

这会在每 5 个元素之后递归地添加一个新的 div。 您也可以取除 5 以外的任何其他数字。