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