javascript - 用 JQuery 包装内容，包括文本

Question

我的内容看起来像这样：

<div id='container'>
.
.
.
 <div id='fromHere'>...</div>
  foo<br />
  bar<br />
  <div class='etc">
   ...
  </div>
</div>

我需要在#fromHere 之后将#container 的内容包装在一个div 中，如下所示：

<div id='container'>
.
.
.
 <div id='fromHere'>...</div>
  <div id='newDiv'>
   foo<br />
   bar<br />
   <div class='etc">
    ...
   </div>
 </div>
</div>

我想我可以通过像6962614这样的字符串操作来做到这一点，但这必须是可重用的，所以如果可能的话，我更喜欢使用 JQuery 选择器。

Answer 1

您可以使用.contents()、.slice()和.index()的组合.wrapAll()：

var $elements = $("#container").contents();
$elements
  .slice($elements.index($('#fromHere')) + 1)
  .wrapAll('<div id="newDiv"></div>');

演示

这将获取 的所有子节点#container，确定#fromHere其兄弟节点中的索引，获取所有后续兄弟节点并将它们包装在一个新元素中。