Javascript 如何包装动态的内部div？

我一直在努力用一个外层的div来包装一些div，这样我就可以设计它们了。但到目前为止，我还无法做到这一点

我有一个

列表

div，其中包含一些需要包装的内部div。也就是说，具有相同字母的内部div需要捆绑在一起。虽然以字母为目标不是一个好主意，因为它们将是动态的

这是我一直努力实现的一个例子：

<div class="list-wrapper">
    <div class="el">A</div>
    <div> 
       <a>A</a>
    </div>
</div>

<div class="list-wrapper">
    <div class="el">C</div>
    <div> 
       <a>C</a>
    </div>
    <div> 
       <a>C</a>
    </div>
</div>

A.
A.
B
B
C
C
C
D
D
D
D
E
E

为了实现您的目标，您可以在循环中组合使用

nextUntil（）

，以获得每个

.el

和

wrapAll（）之间的div元素。您可以在其中包含
addBack（）
，以将当前
.el
添加到要包装的集合的循环中。试试这个：


$（'#list'）。查找（'.el'）。每个（（i，el）=>{
$（el）.nextUntil（'.el'）.addBack（）.wrapAll（''）
});
.wrapper{
背景色：红色；
填充：20px；
}
.list包装器{border:1px solid 35; C00；}

A.
A.
B
B
C
C
C
D
D
D
D
E
E