Оберните каждый третий li в ul, используя jquery

Question

Я пытаюсь обернуть <ul class="mega-sub-menu"> вокруг каждой третьей li в <div class="sub-nav">.

Я использую следующий сценарий без везения.

var lis = $(".sub-nav > ul > li"); 
    for(var i = 0; i < lis.length; i+=3) { 
     lis.slice(i, i+3) 
     .wrapAll("<ul class='mega-sub-menu'></ul>"); 
    } $('.mega-sub-menu').unwrap(); 

Я хотел бы, чтобы превратить это ...

<nav class="navigation"> 
    <button aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> 
     <span class="sr-only"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <ul class="navbar"> 
     <li class="dropdown"> 
     <a class="gold-nav current" href="#">Menu</a> 
      <div class="sub-menu mega-menu"> 
      <div class="sub-nav"> 
       <ul> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
       </ul> 
      </div> 
     </div> 
     </li> 
     <li class="dropdown"> 
     <a class="magenta-nav " href="#">Our Story</a> 
     <div class="sub-menu mega-menu"> 
      <div class="sub-nav"> 
       <ul> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
       </ul> 
      </div> 
     </div> 
     </li> 
     <li class="dropdown"> 
     <a class="blue-nav " href="#">Shop</a> 
     <div class="sub-menu mega-menu"> 
      <div class="sub-nav"> 
       <ul> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
       </ul> 
      </div> 
     </div> 
     </li> 

В это ...

<nav class="navigation"> 
    <button aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> 
     <span class="sr-only"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <ul class="navbar"> 
     <li class="dropdown"> 
     <a class="gold-nav current" href="#">Menu</a> 
      <div class="sub-menu mega-menu"> 
      <div class="sub-nav"> 
       <ul class="mega-sub-menu"> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
       </ul> 
       <ul class="mega-sub-menu"> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
       </ul> 
       <ul class="mega-sub-menu"> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
       </ul> 
       <ul class="mega-sub-menu"> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
       </ul> 
       </ul> 
      </div> 
     </div> 
     </li> 
     <li class="dropdown"> 
     <a class="magenta-nav " href="#">Our Story</a> 
     <div class="sub-menu mega-menu"> 
      <div class="sub-nav"> 
       <ul class="mega-sub-menu"> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
       </ul> 
      </div> 
     </div> 
     </li> 
     <li class="dropdown"> 
     <a class="blue-nav " href="#">Shop</a> 
     <div class="sub-menu mega-menu"> 
      <div class="sub-nav"> 
       <ul class="mega-sub-menu"> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
        <li><a href="">Item</a></li> 
       <ul> 
       <ul class="mega-sub-menu"> 
        <li><a href="">Item</a></li> 
       </ul> 
      </div> 
     </div> 
     </li> 
    </ul> 
    </nav> 

Answer 1

Выстрел в темноте здесь, попробуйте следующее:

updated jsfiddle demo

$(".sub-nav > ul > li").each(function(i){ 
    console.log(i % 3); 
    if (i && (i % 3 === 1)) { 
     $(this) 
      .add($(this).prev()) 
      .add($(this).next()) 
      .wrapAll("<ul class='mega-sub-menu'></ul>"); 
    } 
}); 
$('.mega-sub-menu').unwrap();