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

Я получил некоторый текст, введенный с помощью 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.


jquery split
person arekk    schedule 21.02.2012    source источник

Ответы (4)


arrow_upward
4
arrow_downward

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

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

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

ДЕМО

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

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

ДЕМО

person Selvakumar Arumugam    schedule 21.02.2012
comment
Привет, спасибо за ответ - проблема в том, что я хочу обернуть не один элемент, а всю часть текста после тега hr. Этот текст может содержать несколько тегов ‹p›, ‹span› и т. д. Так в этом проблема - person arekk; 22.02.2012

arrow_upward
2
arrow_downward

Это сделает то, что вы хотите...

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

arrow_upward
1
arrow_downward

У меня была аналогичная проблема, решение которой я нашел после прочтения этого поста. Это разделит содержимое в элементе и обернет все после элемента (до следующего) с помощью div:

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

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

person bjorsq    schedule 18.03.2013

arrow_upward
0
arrow_downward

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

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

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