使用 jquery 和分割内容标记并把它放到另一个div中

Question

我在 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 中。

Answer 1

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

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

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

DEMO

如果我理解正确的话，你想用

将 hr 之后的元素包装起来。然后尝试下面的代码，

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

<一href="http://jsfiddle.net/skram/p4JFx/1/" rel="nofollow">演示

Answer 2

这将做你想做的事......

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

Answer 3

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

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

这仅在您有

---

元素时才有效。在每一项之前（包括开头的一项）。

Answer 4

当您使用 $.wrap() 时，您应该将其附加到您想要换行的元素的选择器上。

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

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