使用jQuery将ul拆分为更多ul
使用jQuery将ul拆分为更多ul
提问于 2012-04-28 04:47:33
我已经用jQuery做了一个脚本。这个脚本将一个li的列表拆分成更多的ul。当列表超过10个li项时，这个列表必须拆分成更多的ul。我在这篇文章中写了这个脚本。
但是脚本不起作用。我做错了什么。该脚本用于导航中的子菜单。当导航li项多于4个时，li项的ul必须拆分为两个ul，我该如何修复这个脚本。谢谢!
submenu();
function submenu() {
$(".submenu").each(function () {
if($("li", this).length > 4){
$(this).closest(".submenu").addClass("width-2")
var submenu = $(this).closest(".submenu");
var $bigList = $(this), group;
while((group = $bigList.find('li:lt(8)').remove()).length) {
$('<ul/>').append(group).appendTo(submenu);
}
}
if($("li", this).length > 10){
$(this).closest(".submenu").addClass("width-3")
}
});
}回答 1
Stack Overflow用户
发布于 2012-04-28 05:23:23
我不完全确定我明白你在做什么，但是这段代码会将每个子菜单UL分成更多指定大小的子菜单，同时保持所有项目的原始DOM顺序：
function splitSubmenu(maxNumItems) {
$(".submenu").each(function () {
// get all child li tags
var list$ = $(this).children("li");
var num, nextAfter$, after$ = $(this);
// as long as the current list it too long, loop
while (list$.length > maxNumItems) {
// decide how many to remove this iteration
num = Math.min(maxNumItems, list$.length - maxNumItems);
// create new UL tag, append num items to it
// and insert it into the DOM
nextAfter$ = $('<ul class="submenu">')
.append(list$.slice(maxNumItems, maxNumItems + num))
.insertAfter(after$);
// update insertion point for next loop iteration
after$ = nextAfter$;
// remove the items we just took out from the current jQuery object
list$ = list$.filter(function(index) {
return(index < maxNumItems || index >= 2 * maxNumItems);
});
}
});
}
splitSubmenu(4);你可以在这里看到它的工作原理：http://jsfiddle.net/jfriend00/VMjvQ/。
我不明白你试图用额外的类做什么，所以这部分不包括在内。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10357628
复制相关文章
相似问题
腾讯云开发者
