将多个<p>元素包装到<h3>之间的<div>中

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进行简单演示