如何在下一次出现相同元素之前包装每个元素及其所有兄弟？

Question

我有一些类似于以下的标记：

<h3>A Heading</h3>
<p>Here is a paragraph.</p>

<ul>
  <li>First</li>
  <li>Second</li>
</ul>

<blockquote>Here's some other block-level element</blockquote>

<h3>The Wrapping Should Stop Before This Heading, but a Second One Should Begin</h3>
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

<p>Notice the varying block-level elements? It probably doesn't make any difference.</p>

我想将每个h3 以及直到下一个h3 的所有内容都包含在一个div 中。

结果应该是：

<div>
  <h3>A Heading</h3>
  <p>Here is a paragraph.</p>

  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>

  <blockquote>Here's some other block-level element</blockquote>
</div>

<div>
  <h3>The Wrapping Should Stop Before This Heading, but a Second One Should Begin</h3>
  <ol>
    <li>First</li>
    <li>Second</li>
  </ol>

  <p>Notice the varying block-level elements? It probably doesn't make any difference.</p>
</div>

我发现了类似的问题，例如this one。它使用.nextUntil() 和.andSelf() 的组合（或.addBack() 一旦我的编辑被批准），但这会将h3s 和separate divs 之间的内容包装起来.

Answer 1

您需要:first 选择器，否则您将包装所有内容，而不仅仅是第一个h3到第二个h3

$('h3:first').nextUntil('h3').addBack().wrapAll('<div>');

Fiddle

Answer 2

似乎.wrapAll() 是缺少的链接。

$('h3').nextUntil('h3').addBack().wrapAll('<div>');