1

我正在开发一个移动菜单（基于this），我想在具有特定类的元素之后将父 [LI] 元素克隆到它自己的子 [UL] 中。

问题 01：第一个问题是我可以基于一个简单的 CSS 选择器克隆元素，但它会克隆该元素的所有迭代，而不仅仅是单个相关的父元素......换句话说，我最终克隆了每个父母到每个孩子[UL]。

问题 02：我也只想克隆 [LI] 并且它是子 [A] 元素……而不是我们要克隆到的子 [UL] 元素。当我运行克隆时，我似乎无法仅隔离父 [LI] 和它的子 [A] 元素......将子 UL 元素克隆到自身中是没有意义的，因为这几乎只会创建无限子菜单循环（这会很有趣，但没用）

任何想法将不胜感激！

这是我的标记：

<ul class="dl-menu">
    <li>
         <a href="#">Parent Item 1</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <!-- This is where I want to add just the one cloned parent LI -->
             <li><a href="">Child Item 1A</a></li>
             <li><a href="">Child Item 1B</a></li>
             <li><a href="">Child Item 1C</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Parent Item 2</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <!-- This is where I want to add just the one cloned parent LI -->
             <li><a href="">Child Item 2A</a></li>
             <li><a href="">Child Item 2B</a></li>
             <li><a href="">Child Item 2C</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Parent Item 3</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <!-- This is where I want to add just the one cloned parent LI -->
             <li><a href="">Child Item 3A</a></li>
             <li><a href="">Child Item 3B</a></li>
             <li><a href="">Child Item 3C</a></li>
         </ul>
    </li>
</ul>

我尝试了各种古怪的想法，但这是我现有的最原始形式的脚本，只是为了给你一个开始的想法：

function clone_menu_parent(){
    $(this).clone().insertAfter(".dl-back");
}
$('.dl-menu > li').each(clone_menu_parent);

感谢任何可能有线索的人！

编辑：我想最后也给出我想要的标记会有所帮助：

<ul class="dl-menu">
    <li>
         <a href="#">Parent Item 1</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <li><a href="">Parent Item 1</a></li>
             <li><a href="">Child Item 1A</a></li>
             <li><a href="">Child Item 1B</a></li>
             <li><a href="">Child Item 1C</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Parent Item 2</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <li><a href="">Parent Item 2</a></li>
             <li><a href="">Child Item 2A</a></li>
             <li><a href="">Child Item 2B</a></li>
             <li><a href="">Child Item 2C</a></li>
         </ul>
    </li>
    <li>
         <a href="#">Parent Item 3</a>
         <ul class="dl-submenu">
             <li class="dl-back">BACK</li>
             <li><a href="">Parent Item 3</a></li>
             <li><a href="">Child Item 3A</a></li>
             <li><a href="">Child Item 3B</a></li>
             <li><a href="">Child Item 3C</a></li>
         </ul>
    </li>
</ul>

当然，如果这适用于任何具有 UL 作为子级的 LI 元素，那就太好了……这样您就可以让菜单适用于 3、4、5、+ 级别的深度。

最终编辑：

效果最好的解决方案（感谢 btm1 从内部元素反向工作的创意），部分感谢为此做出贡献的每个人：

$(".dl-back").each(function(){
    var parent = $(this).parents('li');   
    var copy = parent.clone();
    $(copy).find(".dl-submenu").remove().end();     
    $(this).after(copy);
});

我会注意到下面还有一些其他很好的克隆到孩子的想法......如果你处于类似的情况但 btm1 提供的修复不起作用（即：你不能从内部向后工作元素，因为它的定义不明确），请检查下面的其他答案，因为如果您没有像我一样的特殊要求，它们是完全可行的选择；）

4

3 回答 3

0

我把你的代码粘贴到小提琴中然后给出了答案

干得好 

$('.dl-menu > li > a').each( function(){
    var $this = $(this);
    $newLI = $('<li>').append( $this.clone() );
    $newLI.insertAfter(    $this.next('ul').find('.dl-back') );
}); // end on click
于 2013-05-05T05:27:43.640 回答
0

据我了解，您希望将<a>元素从最顶层的元素克隆li到子ul元素中。话虽如此，为什么不将其用作您的选择器：

 function clone_menu_parent(){
      $(this).find("a").clone().insertAfter(".dl-back");
 }
 $('.dl-menu > li').each(clone_menu_parent);

如果您在查找正确元素时遇到问题，<a>只需添加一个类指示符a.FindMe，并将 find 调用改为.find("a.FindMe").

编辑:: 在看到您想要的输出后尝试将函数更改为如下所示：

 function clone_menu_parent(){
      var link = $(this).find("a");
      var linkhtml = link.outerHTML;
      $(this).find(".dl-submenu > .dl-back").after("<li>" + linkhtml + "</li>");
 }
于 2013-05-05T04:59:14.083 回答
0

我会走另一条路，每个 dl-black 找到父母。

$(".dl-back").each(function(){
   var parent = $(this).parents('li');
   var copy = parent.next().clone().wrap('<li></li>');

   $(this).after(copy);
});
于 2013-05-05T05:04:52.157 回答