为什么将孩子包裹在容器中不起作用

Question

我试图将某些元素的子元素包装在一个新的 div 中，但它不起作用。 当我循环遍历元素的子元素时，循环仅循环遍历 1 个元素。

它只包裹一个孩子而留下另一个。 为什么？

 var homepageRows = document.querySelectorAll(".span-12 > *"); homepageRows.forEach(function(row){ var newRow = document.createElement("div"); newRow.className = "wrapper-row"; row.childNodes.forEach(function(child) { newRow.appendChild(child); }); row.append(newRow); })

 <div class="col sqs-col-12 span-12"> <div class="row sqs-row"> <div>Wrap me in.wrapper-row</div> <div>Wrap me in.wrapper-row</div> </div> <div class="row sqs-row"> <div>Wrap me in.wrapper-row</div> <div>Wrap me in.wrapper-row</div> </div> <div class="row sqs-row"> <div>Wrap me in.wrapper-row</div> <div>Wrap me in.wrapper-row</div> </div> </div>

Answer 1

一种做法如下，在代码中用一些注释来尝试解释：

 let homepageRows = document.querySelectorAll(".span-12 > *"); homepageRows.forEach(function(row) { let newRow = document.createElement("div"); // here we use the Element.classList API to add a new class-name: newRow.classList.add("wrapper-row"); // the easiest change is to simply substitute `row.children` (which retrieves // a list of the element-children of the current `row` element-node; we use // an Array-literal and the spread operator to convert the iterable HTMLCollection // into an Array in order to use Array.prototype.forEach() (there is a // NodeList.prototype.forEach(), which is available to chain to the returned // value of document.querySelectorAll(), but there is no // HTMLCollection.prototype.forEach() which means it's easier to use the Array version. [...row.children].forEach(function(child) { newRow.appendChild(child); }); row.append(newRow); })

 *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } div { border: 2px solid currentColor; color: black; padding: 1em; margin: 1em; }.wrapper-row, .wrapper-row * { color: red; }

 <div class="col sqs-col-12 span-12"> <div class="row sqs-row"> <div>Wrap me in.wrapper-row</div> <div>Wrap me in.wrapper-row</div> </div> <div class="row sqs-row"> <div>Wrap me in.wrapper-row</div> <div>Wrap me in.wrapper-row</div> </div> <div class="row sqs-row"> <div>Wrap me in.wrapper-row</div> <div>Wrap me in.wrapper-row</div> </div> </div>

参考：

• document.querySelectorAll() 。
• Element.children 。
• Element.classList 。
• Node.childNodes 。
• NodeList.prototype.forEach() 。

Answer 2

querySelectorAll的返回值已经是一个数组，即匹配你查询的所有元素的数组。 所以在你的情况下，大概只有一个。 我相信，您想要做的不是遍历该数组，而是遍历第一个元素（您想要的那个）的所有子元素：

var homepageRows = document.querySelectorAll(".span-12 > *");
homepageRows.childNodes.forEach(function(row){
   ...
})