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

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 中包含 [box] 的任何段落，也许你需要转义括号）：

$("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() [box] 段落，然后 wrapAll() 使用 :gt() 获取其后面的所有段落：

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">');

Answer 4

感谢大家的帮助！它还帮助我想出了另一个对我有用的策略：

$('.entry p:contains([box])').each( function() {
    $(this).prevAll().wrapAll('<div class="lefty">');
});

$('.entry p:contains([box])').each( function() {
    $(this).nextAll().wrapAll('<div class="righty">');
});
$("p:contains([box])").remove();

它的作用是创建两个单独的框：1.元素在[box]之前，2.元素在[box]之前