javascript - 如何在列表项中创建新的 Div

Question

我找到了相关答案，但与这个问题不一样。
我的问题是如何仅在 .widget-content 上的列表项中创建新的 Div就像下面给出的那样？

主要HTML:Fiddle

<div class="widget-content">
<ul>
<li>Test Content</li>
<li>Test Content</li>
<li>Test Content</li>

<li>Test Content</li>
<li>Test Content</li>
<li>Test Content</li>
</ul>
</div> 

我想要:

 <div class="widget-content">
 <ul>
 <div class='new1'> <!--Want to Add New dive class 1-->
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
    </div>
 <div class='new2'> <!--Add New dive class 2-->
 <ul>
  <li>Test Content</li>
  <li>Test Content</li>
  <li>Test Content</li>
 </div>    
</ul>
</div>

表示添加 2 Div，<div class='new1'>有前 3 个 child 且 <div class='new2'>有最后 3 个子项/列表项。如何通过 Jquery/JS 简单地做到这一点？
提前致谢。

Answer 1

你可以这样做

var selectedIndex = 3;
$(".widget-content li").each(function (index) {
    if (index == selectedIndex) {
        $(this).prevAll().wrapAll("<div class='new1' />");
        $(this).nextAll().andSelf().wrapAll("<div class='new2' />");
    }
});