将项目范围包装在 <li> div 容器中

Question

假设我有以下 DOM 树：

<div id="parent-container">
 <ul>
  <li>item-1</li>
  <li>item-2</li>
  <li>item-3</li>
  <li>item-4</li>
  <li>item-5</li>
  ...
 </ul>
</div>

如何将从 item-3 到 n 个项目的所有项目包装在一个div或其他ul中，或者我可以用来在容器上施加垂直滚动条的任何元素，该容器包含从项目-3 开始的项目。

所需的输出应为：

<div id="parent-container">
 <ul>
  <li>item-1</li>
  <li>item-2</li>
  <div id="child-container">
   <li>item-3</li>
   <li>item-4</li>
   <li>item-5</li>
   ...
   </div>
 </ul>
</div>

我尝试了以下方法，但没有运气：

$('#parent-container ul *:nth-child(n+3)').wrapInner('<div class="child-container"></div>');

Answer 1

使用 jQuery :gt() selector然后.wrapAll() method.

$('#parent-container li:gt(3)').wrapAll('<div id="child-container"></div>'))

请参阅文档

Answer 2

除了它的向下答案：如果需要将一系列元素包装到指定的n，则可以使用slice（）：

var i = 2;
var n = 4;
$("#parent-container ul li").slice(i, n).wrapAll("<div class='child-container'></div>");

代码笔