Javascript 如果子菜单li有5个以上的li'；是否创建新的ul并放置剩余的列表项？

我基本上是想检查我的子菜单是否有五个以上的列表项，以及它是否抓取了剩余的列表项，并使用jquery将它们放在当前父ul之外的新ul中。由于列表的结构，它变得复杂了

以下是DOM结构：

<ul id="nav" class="se test">
<li id="menu1" class="page-1307 parent-menu parent">
    <div class="nav-inner">
        <a class="menulink" id="menuitem1" onclick="return false" href="#">test<span class="toggle"></span></a>
        <ul id="ie1" class="plain">
            <li class="parent-menu parent"><a href="test">test<span class="toggle"></span></a>
                <div class="submenu-wrapper">
                    <ul class="plain">
                        <li><a href="test">test</a></li>
                        <li><a href="test">test</a></li>
                        <li><a href="test">test</a></li>
                        <li><a href="test">test</a></li>
                        <li><a href="test">test</a></li>
                        <li><a href="test">test</a></li>
                        <li><a href="test">test</a></li>
                    </ul>
                </div>
           </li>
           <li class="parent-menu parent"><a href="test">test<span class="toggle"></span></a>
                <div class="submenu-wrapper">
                    <ul class="plain">
                        <li><a href="test">test</a></li>
                        <li><a href="test">test</a></li>
                        <li><a href="test">test</a></li>
                        <li><a href="test">test</a></li>
                    </ul>
               </div>
           </li>
        </ul>
    </div>
</li>
<li id="menu2" class="menulink page-7">
    <div class="nav-inner">
        <a href="test">test</a>
    </div>
</li>
</ul>

基本上，我需要抓取那些剩余的列表项，并将它们放在一个新的li.parent-menu.parent中，其中包括子div.sub-menu-wrapper和ul.plain。实际剩余的列表项将位于新li.parent-menu的ul.plain中。我希望从那以后我能做得更好。我在这件事上已经坚持了一两天了，还没来得及弄明白。任何帮助都将不胜感激，谢谢

这就是我所追求的，记住它是动态的。

你可以：

在文档中循环所有ul

foreach元素计数子元素

如果发现ul元素下的li编号大于5

使用所需列表的html创建新列表

$（文档）.ready（函数（）{
$（'.submenu wrapper'）。每个（函数（）{
var计数=0；
var i=1；
$（this）.children（'ul'）。children（'li'）。each（function（）{
计数_li++；
如果（计数i>5&&i==1）{
$（document.body）.append（'）；
$（'#newlist'）.append（$（this.nextUntil（$（this.last（））.andSelf（））；
i++；
}
});
});
});



























以下是我想要的最终答案：

megaMenu: function(){
    function addNewList(current, newItems) {
        var newList = $('<li class="parent-menu parent newLi">');
        var div = $('<div class="submenu-wrapper">');
        newList.append(div);
        var ul = $('<ul class="plain">');
        div.append(ul);
        for (var i = 0; i < newItems.length; i++) {
            ul.append(newItems[i]);
        }
        current.after(newList);
        return newList;
    }
    function splitLists() {
        var allLists = $(".plain > li.parent-menu");
        for (var i = 0; i < allLists.length; i++) {
            var currentList = $(allLists[i]);
            var items = currentList.find("li");

            if (items.length > 5) {
                var temp = [];
                for (var j = 5; j < items.length; j++) {
                    temp.push($(items[j]));
                    if (temp.length == 5) {
                        currentList = addNewList(currentList, temp);
                        temp = [];
                    }
                }
                if (temp.length > 0) {
                    currentList = addNewList(currentList, temp);
                }
            }
        }
    }
    splitLists();
}

megaMenu:function（）{
函数addNewList（当前、新项）{
var newList=$（'li class=“parent menu parent newLi”>）；
var div=$（''）；
newList.append（div）；
var ul=$（'ul class=“plain”>）；
附加分部（ul）；
对于（var i=0；ili.parent菜单”）；
对于（var i=0；i5）{
var-temp=[]；
对于（变量j=5；j0）{
currentList=addNewList（currentList，temp）；
}
}
}
}
拆分列表（）；
}
通过评论进行澄清后，您似乎正在寻找类似的内容。我对代码进行了注释，以解释流程背后的逻辑：

// function for adding a new LI item.
function addNewList(current, newItems) {
    // Create the new li node.
    var newList = $('<li class="parent-menu parent">');

    // Add the initial a link.
    newList.append('<a href="test">test<span class="toggle"></span></a>');

    // Create and append the submenu-wrapper div to our new list item.
    var div = $('<div class="submenu-wrapper">');
    newList.append(div);

    // Create and append the new ul node to our submenu-wrapper div.
    var ul = $('<ul class="plain">');
    div.append(ul);

    // Loop the 5 (or less) items that have been specified and add them to our new list.
    for (var i = 0; i < newItems.length; i++) {
        // Using append will move the elements that already exist in the original place.
        ul.append(newItems[i]);
    }

    // Add our new list item to the DOM.
    current.after(newList);

    return newList;
}

// Base function to split the lists as required.
function splitLists() {

    // Get all the lists that we want to process.
    var allLists = $(".plain > li.parent-menu");

    // Loop each list and process.
    for (var i = 0; i < allLists.length; i++) {
        var currentList = $(allLists[i]);

        // Get the sub-items that we need to split.
        var items = currentList.find("li");

        // We only care about lists that are more than 5 items.
        if (items.length > 5) {
            // Create array to store the items that we want to move (any after first 5)
            var temp = [];
            // Start at the 6th item an start moving them in blocks of 5.
            for (var j = 5; j < items.length; j++) {
                // Add the item to move to our temp array.
                temp.push($(items[j]));

                // If we have 5 in our temp array then move them to new list.
                if (temp.length == 5) {
                    // Move items with helper function.
                    currentList = addNewList(currentList, temp);
                    // Clear the temp array ready for the next set of items.
                    temp = [];
                }
            }
            // If we have any spare ones that didn't get handle in the length == 5 check, then process them now.
            if (temp.length > 0) {
                currentList = addNewList(currentList, temp);
            }
        }
    }
}

// Run the process.
splitLists();

//用于添加新LI项的函数。
函数addNewList（当前、新项）{
//创建新的li节点。
var newList=$（“
”）；
//添加首字母a链接。
newList.append（“”）；
//创建子菜单包装器div并将其附加到新列表项中。
var div=$（''）；
newList.append（div）；
//创建新的ul节点并将其附加到子菜单包装器div。
var ul=$（'ul class=“plain”>）；
附加分部（ul）；
//循环指定的5个（或更少）项，并将它们添加到新列表中。
对于（var i=0；ili.parent菜单”）；
//循环每个列表和流程。
对于（var i=0；i