使用jquery包裝ul的每三分之一

Question

我想圍繞li在<div class="sub-nav">周圍圍繞<ul class="mega-sub-menu">。

我使用下面的腳本沒有運氣。

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