Question

我正在开发一个移动菜单（基于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提供的修复不起作用（即：你不能倒退从内部元素，因为它没有明确定义），检查下面的其他答案，因为如果你没有像我这样的特殊要求，它们是完全可行的替代方案;）

Answer 1

根据我的理解，您希望将<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("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>");
 }

Answer 2

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

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

   $(this).after(copy);
});

Answer 3

我拿了你的代码并将其粘贴到一个小提琴然后回答

Here you go

$('.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

JQuery：如何将元素克隆到自己的子元素中

3 个答案: