Move Li between <ul>

Question

Sorry again but here is my last code and everthing works great except that when i make the jquery the li from 4 to the end moves after the "ul" that i want but i want that li from 4 to the end to move BETWEEN the ul that i want. here is my code:

<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">');
    }

i need form you the best code that i have to replace the jquery part or "insert after" so it the li form 4 to the end would go between the desired ul thanks

Answer 1

Use .appendTo() instead of .insertAfter() .

Append puts it inside of the open/closing tags, insert puts it outside the tags.

$('#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">');