body 的 wrapInner() 直到指定元素答案

【问题标题】：wrapInner() of body until a specified elementbody 的 wrapInner() 直到指定元素
【发布时间】：2016-07-04 22:48:57
【问题描述】：

使用下面的 HTML：

<body>
   <h1>Foo</h1>
   <div>a</div>
   <div>b</div>
   <h4>Bar</h4>
   <div>c</div>
   <div id="wrap-until"></div>
</body>

我可以使用$('body').wrapInner('<div class="content"></div>'); 轻松包裹整个正文部分但是我怎样才能包裹正文内容直到我的 wrap-until div 元素，所以它看起来像：

<body>
   <div class="content">
      <h1>Foo</h1>
      <div>a</div>
      <div>b</div>
      <h4>Bar</h4>
      <div>c</div>
   </div>
   <div id="wrap-until"></div>
</body>

注意：正文中的内容将始终不同，但 #wrap-until 元素始终可用。

【问题讨论】：

抱歉@RoryMcCrossan 我认为包装器元素混淆了一些东西，我已经更新了没有包装器的问题。
嗯，没问题。我为你添加了答案。

标签： jquery html css wrapinner

【解决方案1】：

您可以获取所有必需的元素并使用not() 排除wrap-until 元素，然后排除wrapAll()，如下所示：

$('body > *').not('#wrap-until').wrapAll('<div class="content"></div>');

Working example

【讨论】：

很好的解决方案，我唯一的问题是由于星号和需要遍历所有正文元素，它的使用强度如何，尽管我怀疑使用 > 将其限制为仅顶级元素应该没问题吧？
这是一个问题，但鉴于您的 OP 中的 HTML 结构，遗憾的是别无选择。如果您可以手动将一个类添加到所有必需的元素中，它将提高性能，但我猜您是否可以编辑 HTML，您一开始就不需要这样做 :) 性能应该没问题。您是正确的，> 运算符将选择器限制为仅body 的子级。
因为它只在页面加载时使用一次，不需要在页面点击或交互元素等时重新运行。我认为性能会很好。你是对的，如果我可以访问 HTML，这将是一个更容易解决的问题！再次感谢您的帮助，我一直在为一些最终如此简单和优雅的东西扯掉头发:-)