我需要計算特定的 div，并在每個Xdiv 之后插入另一個 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>
uj5u.com熱心網友回復：
一個基本的 for 陳述句將適合這個問題。
使用
querySelectorAll而不是，getElementsByClassName因為它更易于管理 - QSA 回傳一個類似陣列的靜態節點串列，而 gEBCN 回傳一個實時 HTML 集合，當您在其迭代期間開始插入新元素時可能會絆倒您。要找出應該在哪里添加新的 div 元素，請使用余數運算子（也稱為“模”）。當您遍歷節點串列時，請檢查當前索引 1（陣列從零開始）除以指定數字是否會導致零。如果是，則在新的 div 元素
after中添加當前元素。
注意：我已將用于創建新 div 元素的代碼分離到一個函式中以保持簡單。
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>uj5u.com熱心網友回復：
這使用special-div類迭代節點，跟蹤索引。對于可被它整除的非零索引，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>uj5u.com熱心網友回復：
抱歉，我不太確定您期望的輸出是什么樣的。
怎么用.insertAdjacentHTML(<position>, <text>)？它將 HTML 代碼插入指定的元素。你不需要計算 div :)
element.insertAdjacentHTML()element您可以通過在我main的代碼中進行更改來選擇目標元素。
位置：
'beforeend'- 這意味著“就在元素內部，在它的最后一個子元素之后”。
- 在示例 1 的情況下，就在.main 之前
</div>
位置：
'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>uj5u.com熱心網友回復：
你可以這樣嘗試：
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 ></div>');
這會在每 5 個元素之后遞回地添加一個新的 div。您也可以取除 5 以外的任何其他數字。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510224.html