Javascript 选择特定的父元素并将其与同级元素包裹，直到下一个特定的父元素

我希望使用jQuery来选择

p

标记，这些标记是某个类

hdr

的span的祖父母元素，然后我希望将该p标记及其所有同级标记包装到下一个p标记，该p标记是

hdr

类的父级，依此类推

我遇到的问题是，第二个和第三个包装以及它包含的内容最终会嵌套在它们以前的一组包装中，而不是一个接一个地打印每个包装

我的初始标记：

$（'.main.hdr'）。父（'p'）。每个（函数（）{
$（this）.nextUntil（$（this））.addBack（）.wrapAll（“”）；
});

标题#1

一些段落文本

一些段落文本

一些段落文本

一些段落文本

标题#2

一些段落文本

一些段落文本

标题#3

一些段落文本

一些段落文本

一些段落文本

一些段落文本

一些段落文本

类似这样的操作，将选择传递到
nextUntil
，甚至只是
p:has（.hdr）
，而不是
$（此）

var elems=$（'.main p:has（.hdr）'）；
每个元素（函数（）{
$（this.nextUntil（elems.addBack（）.wrapAll（“”）；
});


var elems = $('.main p:has(.hdr)');

elems.each(function() {
    $(this).nextUntil(elems).addBack().wrapAll('<div class="wrapper" />');
});