javascript - Jquery追加和修改每个相同的类

Question

我正在尝试从导航栏中获取内容，然后修改并将其附加到移动菜单。导航栏 html 看起来像

  <div id="top_bar" class="nav">
                <div class="container">
                    <div class="row">
                        <nav class="clearfix">
                            <a href="http://127.0.1.1:8080/my-account" class="top-bar-link"><span>My Account</span></a>
                            <a href="http://127.0.1.1:8080/" class="top-bar-link"><span> Rewards</span></a>
                            <a href="http://127.0.1.1:8080/" class="top-bar-link"><span>Customer Service</span></a> 
                        </nav>
                    </div>
                </div>
            </div>

我需要将上面的 anchor 附加到以下菜单，并让它们按照下面的格式工作。

<ul id="stmobilemenu" class="visible-xs visible-sm show">
    <li class="stmlevel0"><a href="http://127.0.1.1:8080/first" style="" class="ma_level_0">first</a></li>
    <li class="stmlevel0"><a href="http://127.0.1.1:8080/second" style="" class="ma_level_0">second</a></li>
    <li class="stmlevel0"><a href="http://127.0.1.1:8080/third" style="" class="ma_level_0">third</a></li>
</ul>

我尝试这样做

   var add_to_menu;
   $('#top_bar nav a').each(function(){  
        var line  = '<li class="stmlevel0">';
        $(this).addClass('ma_level_0'); 
        line += $(this).html();
        line += '</li>';
        add_to_menu += line;

})
   $('#stmobilemenu').append(add_to_menu);

这样做的结果是添加了未定义的内容，然后只添加了内容所以附加的就是这种格式。

<li class="stmlevel0"><span>My account</span></li>

我想要它添加的是这种类型

<li class="stmlevel0"><a href="http://127.0.1.1:8080/my-account" style="" class="ma_level_0"><span>My account</span></a></li>

我尝试过的另一件事是

$('#stmobilemenu').append(
    $('#top_bar nav a').each(function(){            
        $(this).prepend('<li class="stmlevel0">'); 
        $(this).addClass('ma_level_0');   
        $(this).append('</li>');         
}));

不过，我遇到了一些问题，首先，附加和前置实际上并没有围绕我想要的 html。结果就像

<a href="http://127.0.1.1:8080/my-account" class="top-bar-link ma_level_0">
    <li class="stmlevel0"></li>
    <span>My account</span>
</a>

所以我需要 li 实际上包围 a。此外，它实际上从原来的位置删除了 #top_bar nav a 的内容，这不是我想要的。我只想将其复制并添加到移动菜单。有人可以帮忙吗？

Answer 1

使用clone() 为每个 <a> 制作一份副本

var $mobMenu= $('#stmobilemenu');// store reference to menu element

$('#top_bar nav a').each(function(){
    var $link = $(this).clone().removeClass().addClass('ma_level_0'); 
    $('<li class="stmlevel0">').append($link).appendTo( $mobMenu);          
});