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

See an example of the following here.

使用index()后，您可以找到[box]段落的wrapAll()，然后:gt() <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">');

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]

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

4 个答案: