使用 jquery 将每三个 li 包裹在 ul 中

Question

我试图将<ul class="mega-sub-menu">包裹在<div class="sub-nav">每三个li周围。

我正在使用以下脚本但没有运气。

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

在黑暗中拍摄，试试这个：

更新了 jsfiddle 演示

$(".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();