Question

我想知道在p tags class =“wrapAfterThisClass”中的特定类出现后，是否可以在divs中使用“wrapper”类包装所有p标签。

市场营销是动态的，所以非常重要的是它是“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中尝试过slice。（）和wrapAll（），到目前为止没有运气。它给了我嵌套的包装器包装它们。

如果有人能指出我正确的方向，我会很感激 - 但这可能是我的方法错了。

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

CheersBjørn

Answer 1

var a = [];

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

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

Answer 2

您可以循环.wrapAfterThisClass元素，使用prevAll('p')获取上一个段落元素，然后.addBack()添加当前.wrapAfterThisClass，然后wrapAll() ：

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

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

2 个答案:

Here's a fiddle