1

我用 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")

        }
    });
}
4

1 回答 1

0

我不完全确定我理解您要做什么，但是此代码会将每个子菜单 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/。

我不明白您要对附加类做什么，因此不包括该部分。

于 2012-04-27T21:23:23.243 回答