Обернуть несколько <p>элементов в <div>между <h3>

Question

с использованием jQuery Я хотел бы преобразовать это:

<h3>Question 1</h3>
<p>Answer 1 P1</p>
<p>Answer 1 P2</p>

<h3>Question 2</h3>
<p>Answer 2 P1</p>
<p>Answer 2 P2</p>
<p>Answer 2 P3</p>

В:

<ul>
   <li>
       <h3>Question 1</h3>
       <div>
          <p>Answer 1 P1</p>
          <p>Answer 1 P2</p>
       </div>
    </li>
    <li>
       <h3>Question 2</h3>
       <div>
          <p>Answer 2 P1</p>
          <p>Answer 2 P2</p>
          <p>Answer 2 P3</p>
       </div>
    </li>
</ul>

Любое предложение будет действительно оценено.

Спасибо!

Answer 1

Я использую nextUntil, чтобы выбрать все p элементы после каждого h3 элемента и обернуть его в div, используя wrapAll, перед добавление элемента h3 и перенос его в li, затем добавление его к ul.В основном,

var ul = $('<ul>').prependTo('body');

$('h3').each(function(){
    $(this).nextUntil('h3')
        .wrapAll('<div>').parent().add(this)
        .wrapAll('<li>').parent().appendTo(ul);
});

См .: http://www.jsfiddle.net/yijiang/SjDe2/1 для простой демонстрации

Answer 2

Интересно!Я с нетерпением жду различных решений.

Теоретически: я бы использовал селектор $('h3, p').each(logic), чтобы пройти через все эти элементы, и когда я встретил тег h3 , я бы создал li , h3 и div , и когда я встретлю p , я добавлю p к div