删除父元素并重新追加子元素
Removing parent elements and re-appending children
我有一个无序列表的导航,这是我遵循/必须遵循的简单结构才能使我的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 的无序列表。我下面的代码删除了正确的元素,但我的问题是重新插入子无序列表(特别是级别 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?
你可以这样做
$("#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/
您可以通过将分离的节点(包装在 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);
相关文章:
- Jasmine-无法将元素追加到DOM
- 将复杂的 SVG 元素追加到选区
- 将同一个元素追加到两个下拉列表中只会导致最后一个元素被追加
- 将元素追加到同级元素
- jQuery向每个元素追加与if语句匹配的内容
- 将一个元素追加到另一个元素的子元素中
- 使用 jquery 将数据值从父元素追加到子元素
- 如何将元素追加到动态生成的元素
- 不能将元素追加到表单数据
- 将元素追加到调用createElement()函数的父级
- 可以't使用jQuery将元素追加到html中
- 如何提取json数据,并通过js为每个拆分元素追加
- 如何在JQuery中将元素追加到动态字段中
- 使用Javascript/jQuery将已存在的元素追加到DOM中
- 按相同顺序将数组元素追加到另一个数组
- 仅为第一个元素追加
- 无法't在Angularjs/Jquery中将span元素追加到数组对象中
- jQuery:将元素追加到inputfield并移除
- Chrome扩展:将元素追加到DOM中没有立即出现的新注入的元素中
- 限制元素追加的数量