移除父元素并重新添加子元素答案

【问题标题】：Removing parent elements and re-appending children移除父元素并重新添加子元素
【发布时间】：2013-10-31 14:40:12
【问题描述】：

我有一个无序列表导航，这是我遵循/必须遵循的简单结构，我的 jQuery 插件才能正常工作，因此必须使用此代码结构：

<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
    <ul id="demo1" class="nav">
        <li>
            <a href="#">Devices</a>
            <div class="mp-level">
            <h2>Devices</h2>
            <a class="mp-back" href="#">back</a>
            <ul>
                <li><a href="#">Mobile Phones</a></li>
                <li><a href="#">Televisions</a></li>
                <li><a href="#">Cameras</a></li>
            </ul>
            </div>
        </li>
        <li>
            <a href="#">Magazines</a>
            <div class="mp-level">
                <h2>Magazines</h2>
                <a class="mp-back" href="#">back</a>
                <ul>
                    <li><a href="#">National Geographic</a></li>
                    <li><a href="#">Scientific American</a></li>
                </ul>
            </div>
        </li>
        ...
   </ul>
</div>
</nav>

我需要提供一个后备，并且我选择了另一个 jQuery 插件，它需要使用与上述不同的结构。我需要删除类名为 .mp-level 的 DIV，但仍保留所有无序列表，包括 .mp-level 子列表。

结果将只是没有标题和 DIV'S 的无序列表。我下面的代码正在删除正确的元素，但我的问题是重新插入子无序列表（特别是第 2 级）：

$( "#demo1 h2, .mp-back" ).remove();
$( ".mp-level ul li .mp-level" ).detach();
$( ".mp-level ul li" ).append('.mp-level ul li .mp-level ul');

在我移除他们的父母后，任何人有任何建议如何重新插入孩子的 UL ？

【问题讨论】：

标签： javascript jquery plugins append detach

【解决方案1】：

您可以保存分离的节点（包装在一个 jQuery 对象中），方法是将它们分配给一个变量，然后在 .append() 调用中使用该变量。

类似这样的：

// this selector doesn't select anything from the example html, btw
var $mp_level = $( ".mp-level ul li .mp-level" ).detach(); 
$(".mp-level ul li").append($mp_level);

【讨论】：

您在编辑之前的第一个答案有效，但它为每个存在的子 UL 复制了第一个子 UL 的数据。第二次和第三次编辑似乎对我不起作用
我明白了。我想我对你的 sn-p 的目标有点困惑（-:。我很高兴你得到了答案。

【解决方案2】：

你可以这样做

$("#mp-menu").find(".mp-level").each(function(i,n){//each ".mp-level"
    $(n).parent().append($(n).children());//append children to parent
    $(n).remove();//remove actual div
});

http://jsfiddle.net/WBWwG/

【讨论】：