Jqueryはそれぞれ同じクラスを追加して変更します

Question

ナビゲーションバーからコンテンツを取得し、モバイルメニューに変更して追加しようとしています。私は次のメニューに上記アンカーを追加し、それらを以下の形式で作業持っている必要があります

<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> 

のようなナビゲーションバーのHTMLが見えます。

<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> 

Iは

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); 

ように、この結果をこれを実行しようとし、それは、それがそうappenededのみコンテンツ 形式のこのタイプに添加し、未定義加えました。

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

私はそれを追加することはまず追記の、私が試したもう一つは、私もこれでいくつかの問題を抱えていた

$('#stmobilemenu').append(
    $('#top_bar nav a').each(function(){    
     $(this).prepend('<li class="stmlevel0">'); 
     $(this).addClass('ma_level_0'); 
     $(this).append('</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> 

このタイプであります私が望む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> 

だから私は実際には、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);   
}); 

Answer 2

var anchors = $('#top_bar nav').children(); 
 

 
anchors.each(function(){ 
 
    var $this = $(this), 
 
     $li = $('<li class="stmlevel0"></li>'); 
 
    
 
    $this.removeClass().addClass('ma_level_0').appendTo($li); 
 
    $li.appendTo('#stmobilemenu'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 

 
<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> 
 
</ul>