合并克隆的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) as attr返回一个字符串或未定义（并且空字符串在您的代码中被视为未定义）。

Answer 2

你可以做...

var $subs = $('.subnav-menu'),
    $lis = $subs.find('> li').clone();

// Add all the $lis to the first subnav...
$subs.eq(0).append($lis);

// Remove the rest of the subs...
$subs.slice(1).remove();

这是一个小演示： http : //jsbin.com/jerapo/2/edit?js，输出