Suppose I've the following DOM tree:
<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>
How do I wrap all items from item-3 to n items in a div or in another ul or any element that I can use to impose a vertical scrollbar on the container that hold items from item-3 onward.
Desired output should be:
<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>
I tried the following and had no luck:
$('#parent-container ul *:nth-child(n+3)').wrapInner('<div class="child-container"></div>');