Question

我目前有一个标准的无序列表，它作为我的网站导航（Here's my markup in full）的手风琴菜单。我想为支持我将使用的新功能（css 3d变换）的浏览器提供更强大的导航。为了实现这一点，我需要稍微修改我的代码结构以匹配以下输出（即将append / clone元素添加到结构中）：

<!-- 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">');

要将Level 1链接克隆到H2，我已经尝试但没有运气：

$( "#mp-menu ul li .mp-level" ).clone('<h2>Devices</h2>');

Answer 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

在无序列表中的某些区域中添加div

1 个答案: