包装范围

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> 

如何从包装项目-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>')) 

参见documentation

Answer 2

除了itsgoingdown回答：你可以用切片（）如果你需要包裹一系列元素到指定的n：

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

Codepen