javascript - 合并克隆的 UL 菜单

Question

我像这样将 UL 从一个元素克隆到另一个元素。

    $( "#mobMenu li a" ).each(function(index) {

     var subID = $(this).attr('id') 

      if (typeof(subID) !== "undefined") {
          subID = "#sub_" + subID + " .subnav-menu"
           var subMenu = $(subID).clone();
           $(this).parent().append(subMenu);
    }
});

我正在克隆的菜单:

<div id="sub_cat3">

 <ul id="sub_cat" class="subnav-menu">
   <li>..</li>
 </ul>

 <ul class="subnav-menu">
   <li>..</li>
 </ul>

</div>

进入一个新的移动菜单，如下所示:

<ul id="mobMenu">
  <li><a id="cat3"></a>
 // cloned menu to go here
</li>
</ul>

那么我可以将每个克隆的 ul 合并为一个 UL 吗？

<ul class="subnav-menu">
<li>..</li>
<li>..</li>
</ul>

Answer 1

我认为您想要这样的东西(必须设计 HTML，因为没有提供合适的示例):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/b10n5mf0/1/

或者使用新的 HTML:http://jsfiddle.net/TrueBlueAussie/b10n5mf0/4/

$("#mobMenu li a").each(function (index) {
    var subID = $(this).attr('id')
    console.log(subID);
    if (subID) {
        subID = "#sub_" + subID + " .subnav-menu li"
        var $div = $('<ul>').append($(subID).clone());
        $(this).closest('li').append($div);
    }
});

注释:

• 它为每个匹配的列表 LI 集创建一个 UL。
• 仅克隆匹配的 LI，然后使用 append 将其插入到创建的 UL 下。
• if (typeof(subID) !== "undefined") 可以替换为 if (subID) 因为 attr 返回一个字符串或未定义(并且空字符串被您的代码视为未定义)。