Wrap multiple <p> elements in a <div> between <h3>

Question

using jQuery, I would like to convert this:

<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> 

IN:

 <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> 

Any suggestion would be truly appreciated.

Thanks!

Answer 1

I use nextUntil to select all p elements after each h3 element and wrap it in a div using wrapAll before adding the h3 element and its wrapper to li , and then add it to ul . Mostly,

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

See: http://www.jsfiddle.net/yijiang/SjDe2/1 for a simple demo

Answer 2

Interesting! I look forward to various solutions.

In theory: I would use the $('h3, p').each(logic) selector to go through all of these elements, and when I came across the h3 tag, I would create li, h3 and div, and when I came across p, I would add p to the div