使用 jquery 和 <hr> 标签拆分内容并将其放入另一个 div答案

【问题标题】：split content with jquery and <hr> tag and put it to another div使用 jquery 和 <hr> 标签拆分内容并将其放入另一个 div
【发布时间】：2012-02-21 22:08:03
【问题描述】：

我在 div 类“.category-info”中输入了一些使用 tinyMCE 输入的文本。文本可以用 hr 标签分割。我想要做的是用 jQuery 分割文本并将文本的第二部分（在 hr 标签之后）包装到单独的 div 中。我的代码如下所示：

var str = $('.category-info').html();
var splitter = $(str.split('<hr>')[1]).html();
$(splitter).wrap('<div class="news-part" />');

当我警告变量拆分器时，它会显示 html 内容（但是没有 p 标记的奇怪之处，它就在 hr 标记之后），但它没有被包装到 div 中。

【问题讨论】：

标签： jquery split

【解决方案1】：

要在 hr 之后包装所有部分，我会执行如下操作，

var str = $('.category-info').html();
str = str.split('<hr>');

$('.category-info').html(str[0] + 
          '<div class="news-part">' + 
             str[1] + 
          '</div>');

DEMO

如果我理解正确，您想用<div class="news-part" /> 包裹hr 之后的元素。然后试试下面的代码，

$('.category-info hr').next().wrap('<div class="news-part" />');

DEMO

【讨论】：

您好，感谢您的回复 - 问题是我想包装的不是一个元素，而是 hr 标记后的所有文本部分。该文本可以包含多个
等标签。所以这就是问题

【解决方案2】：

这会做你想做的......

var str = $('.category-info').html();
var splitter = str.split('<hr>')[1];
$(splitter).wrap('<div class="news-part" />');

【讨论】：

【解决方案3】：

我有一个类似的问题，我在阅读这篇文章后找到了解决方案。这将在一个元素处拆分内容并用 div 将元素之后的所有内容（直到下一个）包装起来：

$('.category-info hr').each(function(){ 
    $(this).nextUntil('hr').wrapAll('<div class="news-part"/>');
});

这仅适用于您在每个项目之前（包括开头的一个）都有<hr> 元素的情况。

【讨论】：

【解决方案4】：

使用 $.wrap() 时，应将其附加到要包装的元素的选择器上。

按照我理解你的问题的方式，试试这个：

$('.category-info hr:nth-child(2)').wrap('<div class="news-part" />');

【讨论】：