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>

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

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

结果是它添加了undefined，然后它只添加了内容所以这种格式是有吸引力的。

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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

Jquery追加并修改每个相同的类

2 个答案: