如何删除重复的html包装? (jQuery的)

时间:2015-12-22 16:47:27

标签: javascript jquery html css

我有一个导航菜单,需要用某个div和类包装,以便CSS适用。

1。默认博客帖子有必要的html包装和css导航

<nav class="main-navigation dd-menu toggle-menu">
     <ul id="menu-main-menu" class="menu-main-menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">About Us</a></li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children >
             <a href="#">Books</a>
             <ul class="sub-menu">
                 <li>
                     <div class="megamenu-container container">
                         <div class="row">
                            <li>
                                <div class="megamenu-container container">
                                    <div class="row">   
                                        <li><a href="#">Rental</a></li>
                                        <li><a href="#">New</a></li>
                                        <li><a href="#">Used</a></li>
                                    </div>
                                </div>
                            </li>

                         </div>
                     </div>
                 </li>
             </ul>
         </li>
     </ul>
</nav>

2. 其他类型的博文有错误的导航菜单:

<nav class="main-navigation dd-menu toggle-menu">
     <ul id="menu-main-menu" class="menu-main-menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">About Us</a></li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children >
             <a href="#">Books</a>
             <ul class="sub-menu">
                 <li>           
                    <li><a href="#">Rental</a></li>
                    <li><a href="#">New</a></li>
                    <li><a href="#">Used</a></li>                       
                 </li>
             </ul>
          </li>
      </ul>
</nav>

执行以下脚本后:

<script type="text/javascript">

        var j = jQuery.noConflict();
        j(function() {

        j('main-navigation.dd-menu #menu-main-menu .menu-item-has-children > .sub-menu').wrapInner('<li class=""><div class="megamenu-container container"><div class="row"></div></div></li>');
        });


</script>

此项目现在将有一个重复的包装器 1。默认博客帖子有必要的html包装和导航的CSS

<nav class="main-navigation dd-menu toggle-menu">
     <ul id="menu-main-menu" class="menu-main-menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">About Us</a></li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children >
             <a href="#">Books</a>
             <ul class="sub-menu">
                 <li>
                     <div class="megamenu-container container">
                         <div class="row">
                            <li>
                                <div class="megamenu-container container">
                                    <div class="row">   
                                        <li><a href="#">Rental</a></li>
                                        <li><a href="#">New</a></li>
                                        <li><a href="#">Used</a></li>
                                    </div>
                                </div>
                            </li>

                         </div>
                     </div>
                 </li>
             </ul>
         </li>
     </ul>
</nav>

如何删除重复的包装器,使其只有一个包装器?

0 个答案:

没有答案