Question

再次抱歉，但这里是我的最后一段代码和外表工作很棒，除了当我制作jquery时，从4到最后的li移动到我想要的“ul”之后但我希望从4到最后移动的li在我想要的ul之间。这是我的代码：

<nav id="primary_nav">
    <ul class="nav" id="nav">   
            <li id="nav_app_forums" class="left active"><a href="http://localhost/" title="Go to Forums">Forums</a></li>            
            <li id="nav_app_members" class="left "><a href="http://localhost/members/" title="Go to Members">Members</a></li>
            <li id="nav_app_calendar" class="left "><a href="http://localhost/calendar/" title="Go to Calendar">Calendar</a></li>
            <li id="nav_app_ipchat" class="left "><a href="http://localhost/chat/" title="Go to Chat">Chat</a></li>
            <li id="nav_app_ccs" class="left "><a href="http://localhost/page/index.html" title="Go to Pages">Pages</a></li>
            <li id="nav_app_blog" class="left "><a href="http://localhost/blogs/" title="Go to Blogs">Blogs</a></li>
            <li id="nav_app_gallery" class="left "><a href="http://localhost/gallery/" title="Go to Gallery">Gallery</a></li>
            <li id="nav_app_downloads" class="left "><a href="http://localhost/files/" title="Go to Downloads">Downloads</a></li>
    </ul>
    <ul class="nav">
        <li id="nav_other_apps" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="more_apps">More <i class="fa fa-caret-down"></i></a>
                        <ul id="more" class="dropdown-menu" role="menu">
                        </ul>
        </li>
        <li class="dropdown">
                                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <i class="fa fa-caret-down"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                  <li><a href="#">Extra Link</a></li>
                                  <li><a href="#">Extra Link</a></li>
                                  <li><a href="#">Extra Link</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#">Separated link</a></li>
                                 </ul>
        </li>
    </ul>
</nav>

if( $('#nav li').length > 5 )
    {
        $('#nav li:gt(3)').insertAfter('<ul id="more" class="dropdown-menu" role="menu">');
    }

我需要为您提供最好的代码，我必须替换jquery部分或“插入后” 所以它的形式4到最后将介于所需的ul谢谢

之间

Answer 1

使用.appendTo()代替.insertAfter()。

追加将其置于打开/关闭标记内，插入将其放在标记之外。

$('#nav li:gt(3)').appendTo('#more');

JS Fiddle

Answer 2

使用jsfiddle

尝试此.wrapInner

$('#nav li:gt(3)').wrapInner('<ul id="more" class="dropdown-menu" role="menu">');

在<ul> </ul>之间移动Li

2 个答案:

JS Fiddle