javascript - 在 <ul> 之间移动 Li

标签 javascript jquery html css

再次抱歉,但这是我的最后一个代码,一切都很好,除了当我制作 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 部分或“插入之后” 所以它的 li 形式 4 到最后会在所需的 ul 之间,谢谢

最佳答案

使用 .appendTo() 而不是 .insertAfter()

Append 将其放在开始/结束标签内,insert 将其放在标签外。

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

JS Fiddle

关于javascript - 在 <ul> 之间移动 Li,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21513436/

相关文章:

java - primefaces 4 - 如何在每次事件发生时创建新的对话框实例

javascript - Node.js,不调用处理程序回调

javascript - 使用 Jquery 的 Twitter 登录 Oauth 问题

javascript - W3Schools 示例不起作用?

javascript - 使用 Jquery 根据输入显示和隐藏元素

javascript - 是否有比 JSON/BSON 更精简的 Javascript 对象表示法格式?

javascript - 带有最小值/最大值的向上/向下按钮

javascript - 在 Jquery 中控制菜单文本溢出

html - Chrome 存储新密码但不将其链接到当前用户名 : how can I fix it?

html - CSS如何让一个div水平居中