jquery - 如何通过 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>

正如这里提到的。

现在我想通过第一个片段中的 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>