Question

我基本上试图检查我的子菜单是否有超过五个列表项，如果它确实抓住剩余的列表项并使用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菜单的ul.plain。我希望自那以后。我已经坚持了一两天，并且无法弄明白。任何帮助都会非常感激，谢谢。

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

Answer 1

你可以：

在文档中循环所有ul
foreach element count children
如果发现ul元素下的li数是> 5
使用所需列表的html创建新列表

＆＃13;

$(document).ready(function(){
    $('.submenu-wrapper').each(function(){
        var count_li=0; 
        var i=1;
        $(this).children('ul').children('li').each(function(){
            count_li++;
            if(count_li>5 && i==1){
               $(document.body).append('<ul id="newlist"></ul>');
               $('#newlist').append($(this).nextUntil($(this).last()).andSelf());
               i++;
            }
         });
        
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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">test11</a></li>
                        <li><a href="test">test12</a></li>
                        <li><a href="test">test13</a></li>
                        <li><a href="test">test14</a></li>
                        <li><a href="test">test15</a></li>
                        <li><a href="test">test16</a></li>
                        <li><a href="test">test17</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">test21</a></li>
                        <li><a href="test">test22</a></li>
                        <li><a href="test">test23</a></li>
                        <li><a href="test">test24</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>

＆＃13;

Answer 2

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

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();
}

Answer 3

经过评论澄清后，您似乎正在寻找类似的东西。我已经对代码进行了评论，以解释该过程背后的逻辑：

// 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();

Here is a working example

如果子菜单有超过5个li，则创建一个新的ul并放置剩余的列表项？

3 个答案: