Javascript 如何在特定元素后将文本包装在div中

我希望能够在文本中的第一个BR之后，在一些文本周围加上一个div

这就是CMS中的外观，例如：

<div class="quote">
<p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget ligula scelerisque, tempor justo non, pretium eros. Duis luctus pulvinar posuere. Nunc quam dui, tempor eu tincidunt et, pulvinar at quam.<br /><br />

        Sed congue nisl eget libero mollis, a rhoncus odio sollicitudin. Cras aliquet mi vel diam elementum, ac vestibulum ligula imperdiet. Nulla facilisi. Praesent vestibulum nisi odio, sed scelerisque diam molestie vitae..<br /><br />

    Sed rhoncus purus eu metus elementum hendrerit. Sed scelerisque sodales eros vel tempus. Morbi tempor risus condimentum, sagittis turpis vel, auctor odio. Fusce sed lorem non dolor fringilla accumsan. Proin metus lectus.<br /><br />

    Donec malesuada elit quis nunc ultrices dictum. Nulla quis tortor sed quam aliquet tempor. Duis porta nunc non augue fermentum rutrum. Morbi imperdiet justo et est pellentesque, sed consequat neque ultricies..<br />
    </p>
</div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。Phasellus eget ligula scelerisque，临时性的，临时性的。普尔维纳尔·波苏尔夫妇。码头码头、临时码头和pulvinar码头。


他是一个自由的摩利斯人，一个独立自主的人。前庭舌苔的直径和前庭舌苔的厚度。无便利。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭
这是一个很好的例子。塞德·斯克利斯·索达莱斯·厄洛斯·维勒·坦普斯。Morbi Temporar risus调味品，牛蒡，拍卖人odio。Fusce sed lorem non dolor fringilla accumsan。在耳垂中的位置。


不要把你的名言写得太好了。这是暂时的侵权行为。杜伊斯·波尔塔·努克非奥古斯发酵芸香。Morbi只不过是一种不公平的行为，而且是一种不可告人的后果。

我希望jQuery在第一个BR之后添加一个div，这样看起来：

<div class="quote">
    <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget ligula scelerisque, tempor justo non, pretium eros. Duis luctus pulvinar posuere. Nunc quam dui, tempor eu tincidunt et, pulvinar at quam.<br />
<div id="space">
<br />

            Sed congue nisl eget libero mollis, a rhoncus odio sollicitudin. Cras aliquet mi vel diam elementum, ac vestibulum ligula imperdiet. Nulla facilisi. Praesent vestibulum nisi odio, sed scelerisque diam molestie vitae..<br /><br />

        Sed rhoncus purus eu metus elementum hendrerit. Sed scelerisque sodales eros vel tempus. Morbi tempor risus condimentum, sagittis turpis vel, auctor odio. Fusce sed lorem non dolor fringilla accumsan. Proin metus lectus.<br /><br />

        Donec malesuada elit quis nunc ultrices dictum. Nulla quis tortor sed quam aliquet tempor. Duis porta nunc non augue fermentum rutrum. Morbi imperdiet justo et est pellentesque, sed consequat neque ultricies..<br />
</div>
        </p>
    </div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。Phasellus eget ligula scelerisque，临时性的，临时性的。普尔维纳尔·波苏尔夫妇。在码头的pulvinar码头，临时码头和临时码头。



他是一个自由的摩利斯人，一个独立自主的人。前庭舌苔的直径和前庭舌苔的厚度。无便利。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭
这是一个很好的例子。塞德·斯克利斯·索达莱斯·厄洛斯·维勒·坦普斯。Morbi Temporar risus调味品，牛蒡，拍卖人odio。Fusce sed lorem non dolor fringilla accumsan。在耳垂中的位置。


不要把你的名言写得太好了。这是暂时的侵权行为。杜伊斯·波尔塔·努克非奥古斯发酵芸香。Morbi只不过是一种不公平的行为，而且是一种不可告人的后果。

目前，我的jQuery已经做到了这一点：

$('.quote p br').wrapAll('<div id="space"></div>');

$（'.quote p br'）.wrapAll（''）；

但这只是获取所有br并将它们添加到div中，而不是文本的其余部分

---

JS Fiddle here:

由于您也在处理文本节点，元素选择器将无法工作，您需要处理.contents（）。因此，一种方法是在

quote

的内容中找到第一个

br

元素的索引，然后找到之后的所有元素，并将它们包装在一个

div

中

$('.quote').each(function () {
    var $contents = $(this).find('p').contents(),
        $br = $(this).find('p br:first'),
        index = $contents.index($br);

    $contents.slice(index + 1).wrapAll('<div id="space"></div>');
});

$（'.quote'）。每个（函数（）{
var$contents=$（this.find（'p'）.contents（），
$br=$（this.find（'PBR:first'），
索引=$contents.index（$br）；
$contents.slice（索引+1）.wrapAll（“”）；
});

---

演示：

由于您也在处理文本节点，因此元素选择器将无法工作，您需要处理.contents（）。因此，一种方法是在

quote

的内容中找到第一个

br

元素的索引，然后找到之后的所有元素，并将它们包装在一个

div

中

$('.quote').each(function () {
    var $contents = $(this).find('p').contents(),
        $br = $(this).find('p br:first'),
        index = $contents.index($br);

    $contents.slice(index + 1).wrapAll('<div id="space"></div>');
});

$（'.quote'）。每个（函数（）{
var$contents=$（this.find（'p'）.contents（），
$br=$（this.find（'PBR:first'），
索引=$contents.index（$br）；
$contents.slice（索引+1）.wrapAll（“”）；
});

---

演示：

由于您也在处理文本节点，因此元素选择器将无法工作，您需要处理.contents（）。因此，一种方法是在

quote

的内容中找到第一个

br

元素的索引，然后找到之后的所有元素，并将它们包装在一个

div

中

$('.quote').each(function () {
    var $contents = $(this).find('p').contents(),
        $br = $(this).find('p br:first'),
        index = $contents.index($br);

    $contents.slice(index + 1).wrapAll('<div id="space"></div>');
});

$（'.quote'）。每个（函数（）{
var$contents=$（this.find（'p'）.contents（），
$br=$（this.find（'PBR:first'），
索引=$contents.index（$br）；
$contents.slice（索引+1）.wrapAll（“”）；
});

---

演示：

由于您也在处理文本节点，因此元素选择器将无法工作，您需要处理.contents（）。因此，一种方法是在

quote

的内容中找到第一个

br

元素的索引，然后找到之后的所有元素，并将它们包装在一个

div

中

$('.quote').each(function () {
    var $contents = $(this).find('p').contents(),
        $br = $(this).find('p br:first'),
        index = $contents.index($br);

    $contents.slice(index + 1).wrapAll('<div id="space"></div>');
});

$（'.quote'）。每个（函数（）{
var$contents=$（this.find（'p'）.contents（），
$br=$（this.find（'PBR:first'），
索引=$contents.index（$br）；
$contents.slice（索引+1）.wrapAll（“”）；
});

演示：

这将帮助您：

使用此代码：

只需将文本首先包装在像span这样的容器中。然后使用：

$（'.quote p br'）.next（）.wrapAll（''）
这将帮助您：

使用此代码：

只需将文本首先包装在像span这样的容器中。然后使用：
$（'.quote p br'）.next（）.wrapAll（''）
这将帮助您：

使用此代码：

只需将文本首先包装在像span这样的容器中。然后使用：
$（'.quote p br'）.next（）.wrapAll（''）
这将帮助您：

使用此代码：

只需将文本首先包装在像span这样的容器中。然后使用：
$（'.quote p br'）.next（）.wrapAll（''）
如您所愿，此wrapps仅包含

之前的第一个文本节点（使用jQuery的
映射
功能）：

var brs=$（'.quote p br'）；
var nodes=brs.map（函数（）{
返回此.previousSibling；
});
if（nodes.length）{
var firstNode=节点[0]；
var oldText=firstNode.nodeValue；
firstNode.nodeValue=“”；
$（firstNode）.parent（）.prepend（“+oldText+”）；
}


如果您确实希望元素位于第一个节点之后（如您所述），那么只需使用此行而不是最后一行（但我认为您指的是第1段）：

brs[0]。删除（）；
$（firstNode）.parent（）.prepend(
""
+奥尔特