div :在提示词后面创建jQuery容器的快捷方式

Question

我正在为一个博客主题创建一个快捷方式，我想在使用提示词之后在元素周围生成一个div容器。例如，我的博客条目是这样的：

<div class="entry">

<p>First Paragraph</p>

<p>[box]</p>

<p>Second Paragraph</p>

<p>Third Paragraph</p>

</div> <!-- .entry -->

我希望通过一些jQuery魔法，它可以变成这样：

<div class="entry">

<p>First Paragraph</p>

<div class="box">

<p>Second Paragraph</p>

<p>Third Paragraph</p>

</div> <!-- .box -->

</div> <!-- .entry -->

还有一条规则:当我创建一个容器框时，我知道我总是在关闭div.entry之前生成它。我希望这个限制将使为jQuery编写规则变得更容易。例如，如果div.box容器中有内容，我永远不会希望标记看起来像这样：

<!-- I will never mark it up this way -->

<div class="entry">

<p>First Paragraph</p>

<div class="box">

<p>Second Paragraph</p>

</div> <!-- .box -->

<p>Third paragraph</p>

</div> <!-- .entry -->

Answer 1

我认为你最好的选择是jQuery :contains()选择器。使用它，你可以这样做(注意:它匹配任何在HTML中有方框的段落，也许你需要转义括号)：

$("p:contains('[box]')").wrap($('<div>').addClass('box'));

顺便说一句。接受答案并证明你已经在你的问题上付出了努力，这将使它更有可能得到有用的答复。

Answer 2

它将是这样的：

$("div.entry").append(
  $("<div>").addClass("box").append("p:contains([box])+*");
);
$("p:contains([box])").remove();

Answer 3

您可以找到方框段落的index()，然后在使用wrapAll()之后使用<p>获取它后面的所有段落符号：

var boxAt;

$('p').each(function(){
    var $t = $(this);
    if ($t.html() === '[box]') {
        boxAt = $t.index();
        $t.remove();
    }
});

$('p:gt(' + (boxAt - 1) + ')').wrapAll('<div class="box">');