使用jquery将每三行代码封装在html中

Wrap every third li in ul using jquery

本文关键字：代码 三行 封装 html jquery 使用      更新时间：2023-09-26

我正试图将<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>

试试这个:

$(".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();
相关文章：