разделить содержимое с помощью jquery и тега <hr>и поместить его в другой раздел

Question

Я получил некоторый текст, введенный с tinyMCE в div-классе '.category-info'. Текст может быть разделен тегом 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

Чтобы обернуть все детали после часа, я бы сделал что-то вроде ниже:

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

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

DEMO

Если я правильно понял,Вы хотите обернуть элемент после hr с помощью <div class="news-part" /> .. Затем попробуйте следующий код,

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

DEMO

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"/>');
});

Это будет работать только в вашем случае, когда у вас есть <hr> элемент до каждый элемент (включая один в начале).

Answer 4

Когда вы используете $ .wrap (), вы должны прикрепить его к селектору элемента, который вы хотите обернуть.

Как я понимаю вашу проблему, попробуйте следующее:

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