我需要將子元素包裝在 wrap-of-parent 中。在包裝之前向父元素和子元素添加一些屬性。在下面描述的代碼中，如果孩子在單獨的行中一個在另一個下面，那么一切都很好，如果他們在一行中，每個其他孩子都被插入到父級包裝中。為什么會發生這種情況以及如何解決？
我得到：
<div id="container">
<div id="parent1">
<div id="child1"></div>
<div id="child2"></div>
<div id="wrap-of-parent1">
<div id="child3"></div>
<div id="child4"></div>
</div>
</div>
我需要得到：
<div id="container">
<div id="parent1">
<div id="wrap-of-parent1">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
<div id="child4"></div>
</div>
</div>
代碼：
var container = document.getElementById("container");
const parentDivs = container.querySelectorAll(":scope *"); //if child elements also have child elements, to wrap in
for (let parent of parentDivs) {
// create a new div
let wrap = document.createElement('div');
wrap.id = 'wrap-of-' parent.id;
// move the parent's children to it
let children = parent.childNodes;
for (let i = 0; i < children.length; i ) {
if (children[i].nodeType === Node.ELEMENT_NODE) {
children[i].setAttribute("data", "somedata");
wrap.append(children[i]);
}}
// and append it to the parent
parent.appendChild(wrap);
}<div id="container">
<div id="parent1">
<div id="child1"></div><div id="child2"></div><div id="child3"></div><div id="child4"></div>
</div>
</div>
<! - If the child elements are one below the other in a separate row it works, if they are in one row it does not work ->uj5u.com熱心網友回復：
如果您繼續移動第一個（索引 0）條目，它將起作用。當遇到錯誤的 nodeType 時，您需要添加一個偏移量以跳過那些，如果沒有子節點，則不處理該節點：
var container = document.getElementById("container");
const parentDivs = container.querySelectorAll(":scope *"); //if child elements also have child elements, to wrap in
for (let parent of parentDivs) {
// create a new div
if (parent.childNodes.length > 0) {
let wrap = document.createElement('div');
wrap.id = 'wrap-of-' parent.id;
// move the parent's children to it
let children = parent.childNodes;
const nChildren = children.length;
let offset = 0;
for (let i = 0; i < nChildren; i ) {
if (children[offset].nodeType === Node.ELEMENT_NODE) {
children[offset].setAttribute("data", "somedata");
wrap.append(children[offset]);
} else {
offset ;
}
}
// and append it to the parent
parent.appendChild(wrap);
}
}<div id="container">
<div id="parent1">
<div id="child1"></div><div id="child2"></div><div id="child3"></div><div id="child4"></div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/335726.html
標籤：javascript 循环 包装纸 孩子们 附子