Как я могу заключить неявный раздел в HTML 5 с помощью jQuery?

Question

HTML-фрагмент:

<h1>Heading</h1> 
<p>paragraph paragraph paragraph</p> 
<h2>Heading</h2> 
<p>paragraph paragraph paragraph</p> 

Фрагмент выше, равна:

<section> 
    <h1>Heading</h1> 
    <p>paragraph paragraph paragraph</p> 
    <section> 
    <h2>Heading</h2> 
    <p>paragraph paragraph paragraph</p> 
    </section> 
</section> 

Как упоминалось here.

Теперь я хочу сделать это с помощью jQuery из первого фрагмента. Есть ли API для этого?

Answer 1

Демо: http://jsfiddle.net/abdennour/LX2YX/

$('h2').next('p').andSelf().wrapAll('<section />'); 

$('h1').next().andSelf().next().andSelf().wrapAll('<section />'); 

Вы можете видеть, браузер инспектор, чтобы проверить DOM дерево:

Answer 2

Другой подход, который легко:

$('h1,p,h2').wrapAll('<section />'); 
$('h2,p:eq(1)').wrapAll('<section />'); 

Demo: http://jsfiddle.net/abdennour/LX2YX/1/

ПРИМЕЧАНИЕ: селектор 'p:eq(1)' означает в вашей странице второй <p>