合并克隆的UL菜单

Combine cloned UL menus

本文关键字：UL 菜单 合并      更新时间：2023-09-26

我正在像这样将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>

I认为您想要这样的东西（必须设计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返回一个字符串或未定义（空字符串被代码视为未定义）

你可以做…

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，输出

相关文章：