使用.wrap()包裹background下所有子div失败，求问题排查

原始HTML结构：

<div class="container">
  <div class="background">
     <div class="a">Title</div>
     <div class="b">Subtitle</div>
     <div class="c">Footer</div>
  </div>
</div>

<div class="container">
  <div class="background">
     <div class="a">Yet another title</div>
     <div class="b">Yet another subtitle</div>
     <div class="c">Yet another footer</div>
  </div>
</div>

<div class="container">
  <div class="background">
     <div class="a">One last title</div>
     <div class="b">One last subtitle</div>
     <div class="c">One last footer</div>
  </div>
</div>

需求：使用jQuery相关方法，将每个.background下的所有子div（.a、.b、.c）包裹到一个.allthedivs容器中。

错误代码：

var backgrounds = document.getElementsByClassName("background");
for(var i = 0; i < backgrounds.length; i++) {
   var childs = backgrounds[i].childNodes;
   $(childs[i]).wrap("<div class='allthedivs'></div>");
}

执行后错误结果：

<div class="container">
  <div class="background">
    <div class="allthedivs"></div>
    <div class="a">Title</div>
    <div class="b">Subtitle</div>
    <div class="c">Footer</div>
  </div>
</div>

<div class="container">
  <div class="background">
     <div class="allthedivs"><div class="a">Yet another title</div></div>
     <div class="b">Yet another subtitle</div>
     <div class="c">Yet another footer</div>
  </div>
</div>

<div class="container">
  <div class="background">
     <div class="a">One last title</div>
     <div class="allthedivs"></div>
     <div class="b">One last subtitle</div>
     <div class="c">One last footer</div>
  </div>
</div>

1. childNodes包含非元素节点：childNodes会返回元素的所有子节点，包括换行、空格这类文本节点，所以第一个.background的childs[0]是空文本节点，导致生成空的.allthedivs容器。
2. 循环索引逻辑错误：外层循环的i同时用来遍历backgrounds数组和索引每个background的子节点数组，这只会处理每个.background下的第i个节点，而非所有子div。
3. 方法使用错误：.wrap()是给每个匹配元素单独包裹父容器，要把多个元素包裹到同一个容器中，需使用.wrapAll()方法。

方案1：纯jQuery简洁写法 #

直接通过选择器定位目标元素，逐个容器处理：

$('.background').each(function() {
  $(this).children('div').wrapAll('<div class="allthedivs"></div>');
});

• $('.background').each()：遍历每个.background元素
• $(this).children('div')：仅获取当前.background下的直接子div（排除文本节点）
• .wrapAll()：将所有匹配的子div包裹到同一个.allthedivs容器中

方案2：修复原生+jQuery混合写法 #

保留原生DOM获取逻辑，修正节点筛选和方法使用：

var backgrounds = document.getElementsByClassName("background");
for(var i = 0; i < backgrounds.length; i++) {
   // 仅获取当前background下的子div元素
   var childDivs = backgrounds[i].querySelectorAll('div');
   $(childDivs).wrapAll("<div class='allthedivs'></div>");
}

内容的提问来源于stack exchange，提问作者Mei