Question

我希望能够在文本中的第一个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>

我希望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>

我目前使用jQuery实现了这个目标：

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

但是这只是抓住所有的br并将它们加在div而不是文本的其余部分。

JS小提琴：http://jsfiddle.net/2pQ4r/

Answer 1

由于您也在处理文本节点，因此元素选择器不起作用，您需要处理.contents（）。因此，一种方法是在br的内容中找到第一个quote元素的索引，然后找到之后的所有元素并将它们包含在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>');
});

演示：Fiddle

Answer 2

我知道你找到了答案。我要离开我的下方，以防万一有人不想使用所有那些看上去漂亮的好看的jQuery。它假设您的浏览器有Element.querySelector和Array.forEach

(function () {
  function unconventionalMigrator(p) {
    var child, next, div;
    // get first br Element
    child = p.querySelector('br');
    // get nextSibling
    next = child = child.nextSibling;
    // make new div element to migrate children
    div = document.createElement('div');
    div.id = 'space';// IMPLEMENTATION SPECIFIC
    // migrate children
    while (child) {
      next = child.nextSibling;// save next
      div.appendChild(child);  // move current
      child = next;            // set next
    }
    // append new div Element
    p.appendChild(div);
  }
  // get p Element
  [].forEach.call(document.querySelectorAll('.quote p'),unconventionalMigrator);
}())

Answer 3

这只包含了<br />之前的第一个文本节点，就像你想要的那样（使用jQuery的map函数）：

var brs = $('.quote p br');
var nodes = brs.map(function(){
    return this.previousSibling;
});

if ( nodes.length ) {
    var firstNode = nodes[0];
    var oldText = firstNode.nodeValue;
    firstNode.nodeValue = "";
    $(firstNode).parent().prepend("<div style=\"border: 1px solid black;\">" + oldText + "</div>");
}

Fiddle

如果你真的想要之后第一个节点（正如你所说的那样），那么只需使用它而不是最后一行（但我认为你的意思是第1段）：

brs[0].remove();
$(firstNode).parent().prepend(
    "<div style=\"border: 1px solid black;\">"
    + oldText
    + "</div><br />"
);

Answer 4

这可以帮到你：

使用以下代码：http://jsfiddle.net/2pQ4r/

首先将文本首先包装在某个容器中，例如span。然后使用： $('.quote p br').next().wrapAll('<div id="space"></div>');

如何在div之后将div中的文本换行

4 个答案: