Question

我有几个看起来像这样的BIOS：

＆＃13;

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</p>

＆＃13;

不是最漂亮的文本块，但它们是由系统自动生成的。我需要遍历每个<p>并在第一组break标记之后取出所有内容并将其包含在<div>之类的内容中。

最终结果将是：

＆＃13;

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.</p>

＆＃13;

<div class="theRest">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</div>
</p>

＆＃13;

Answer 1

试试这个（受到@dave回答的启发）：

$("p").each(function(){

    // Add a div after the second <br /> (in the current <p>)
    $("br:eq(1)", this).after('<div class="theRest"> </ div>');

    // Split each "child" in an array
    $(this).contents().filter(function(index, elem){

        // Keep only children after the <div />
        return index > 3;

    // Remove and put them into the <div />
    }).detach().appendTo($(".theRest", this));
});

Fiddle

Answer 2

试试这个：

$('p').each(function() {
    $(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});

但它不是一个足够好的解决方案。

为防止包装其他p元素，您应该从以下任何父元素中找到：

$('.father').find('p').each(function() {
    $(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});

Answer 3

试试这个：

$($("p").contents().get(2)).after('<div class="theRest"></div>');
$("p").contents().filter(function(index, element) {
    return index > 3;
}).detach().appendTo(".theRest");

Fiddle

Answer 4

即使从服务器返回的格式不符合我的标准，因为它使特定目的的事情变得复杂。然而，有一些技巧仍然有办法做到这一点。

说明：选择所有节点，丢弃第一个节点，因为它恰好是文本节点，然后使用jquery wrapAll方法获取该节点之后的所有节点并将其包装在新div中。

演示：http://jsfiddle.net/qe3bm92e/3/

var txt = $('.txt').contents();
txt.splice(0,1);
txt.wrapAll($("<div>").addClass('red'));

您可以将'.txt'替换为'p'，但由于非常明显的原因，这不是一个好习惯。

如何在特定子元素之后包装段落的内部内容？

4 个答案: