wrap range of <li> items within a div container

Viewed 916

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>');

2 Answers
Related