在无序列表中的某些区域添加 div
Posted
技术标签:
【中文标题】在无序列表中的某些区域添加 div【英文标题】:Appending div's in certain areas within unordered list 【发布时间】:2013-11-01 13:07:48 【问题描述】:我目前有一个标准的无序列表,它充当我的站点导航的手风琴菜单 (Here's my markup in full)。我想为支持我将使用的新功能(css 3d 转换)的浏览器提供更增强的导航。为此,我需要稍微修改我的代码结构以匹配以下输出(即,将元素附加/克隆到结构中):
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<div class="mp-level"> <!--NEW APPENDED ELEMENT-->
<ul id="demo1" class="nav">
<li>
<a href="#">Devices</a>
<div class="mp-level">
<h2>Devices</h2> <!--NEW CLONED ELEMENT-->
<a class="mp-back" href="#">back</a> <!--NEW APPENDED ELEMENT-->
<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> <!--NEW CLONED ELEMENT-->
<a class="mp-back" href="#">back</a> <!--NEW APPENDED ELEMENT-->
<ul>
<li><a href="#">National Geographic</a></li>
<li><a href="#">Scientific American</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
如果可能的话,我想添加新元素,但这似乎无法正常工作:
$( "#mp-menu" ).append('<div class="mp-level">');
要将 1 级链接克隆到 H2 中,我尝试过但没有成功:
$( "#mp-menu ul li .mp-level" ).clone('<h2>Devices</h2>');
【问题讨论】:
有点困惑..你能告诉我们你的最终输出应该是怎样的吗? @bipen 我拥有的起始代码是指向 pastebin 的链接,但我的问题中的代码是我想要的结果。查看识别我需要附加/克隆的元素的 cmets 【参考方案1】:.append() 与字符串连接不同,您可以将字符串的位和片段添加到 dom 结构中。
第一部分你可以使用.wrapInner()
$('#mp-menu').wrapInner('<div class="mp-level" />');
第二部分使用下面的.prepend()
$( "#mp-menu ul li .mp-level" ).prepend(function()
return '<h2>' + $(this).prev().text()+ '</h2> <a class="mp-back" href="#">back</a>';
)
演示:Fiddle
【讨论】:
这很好,但是我需要插入一个类名为 .mp-level 的 DIV 来环绕每个二级 UL 以及新插入的 H2 和反向链接(如果它们存在)。我该如何编辑你的答案来做到这一点? 你是说<a href="#">Magazines</a> <div class="mp-level">
不在源html中
链接存在(即 杂志)但 不存在。你的第二把小提琴已经成功了。谢谢!
以上是关于在无序列表中的某些区域添加 div的主要内容,如果未能解决你的问题,请参考以下文章