如何在jQuery中包裝HTML 5中的隱式部分？

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 />'); 

演示：http://jsfiddle.net/abdennour/LX2YX/1/

注：選擇'p:eq(1)'意味着在你的頁面的第二<p>