Javascript 在特定类出现后在 div 中包装多个 p 标签

Question

我想知道是否可以在 p 标签 class="wrapAfterThisClass"中的特定类 appers 之后将以下示例中的所有 p 标签包装在类为“wrapper”的 div 中。

标记是动态的，因此非常重要的是类“wrapAfterThisClass”，它是包装 div 的“触发器”。

我遇到过建议在第 n 个数字后换行的解决方案，但由于内容是动态的，因此类之间的长度、类出现的时间可能会有所不同。

我的简化 html 标记如下所示:

<p>1</p>
<p class="wrapAfterThisClass">2</p>
<p>3</p>
<p>4</p>
<p class="wrapAfterThisClass">5</p>
<p>6</p>
<p class="wrapAfterThisClass">7</p>

输出应该是这样的:

<div class="wrapper">
    <p>1</p>
    <p class="wrapAfterThisClass">2</p>
</div>
<div class="wrapper">
    <p>3</p>
    <p>4</p>
    <p class="wrapAfterThisClass">5</p>
</div>
<div class="wrapper">
    <p>6</p>
    <p class="wrapAfterThisClass">7</p>
</div>

所以我已经在 jquery each 循环中尝试了 slice.() 和 wrapAll() ，但到目前为止都没有成功。它为我提供了将它们全部包裹起来的嵌套包装器。

如果有人能给我指出正确的方向，我将不胜感激 - 不过，这可能是我的方法有误。

也许它甚至不是我需要的包裹或切片。

干杯比约恩

Answer 1

var a = [];

$("p").each(function(){
    a.push(this);

    if ($(this).hasClass("wrapAfterThisClass")) {
        $(a).wrapAll("<div class='wrapper'>");
        a = [];
    }
});