将 Li 元素在 <ul> 中移动

Question

将 Li 元素在 <ul> 中移动

3

非常抱歉，这是我的最后一段代码，除了当我使用 JQuery 时，从第四个到最后一个 li 移动到了我想要的“ul”之后，其他都很完美。但我希望第四个到最后一个 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部分或“insert after”，这样li 4到结尾的部分将会放在所需的ul之间，谢谢。

- Abdallah Abdalaziz

1

我需要你提供最好的代码......从来没有听说过我们提供低劣的解决方案!!! :D - NoobEditor

+1 为你的努力加油！ - NoobEditor

@NoobEditor 哈哈哈，谢谢啊。所以这样就对了吗？现在我是在正确的道路上了吧？:P - Abdallah Abdalaziz

2个回答

0

尝试使用.wrapInner在jsfiddle上测试一下

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

- lonewolf217

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Deryck · Accepted Answer

2

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

append将其放置在开放/关闭标记内，而insert则将其放置在标记之外。

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

JS Fiddle

- Deryck

@NoobEditor 这段代码在ipb中无法工作，只能在fiddle中使用。 <script> 如果（$（'#nav li'）。length> 5） { $（'#nav li：gt（3）'）。appendTo（'#more'）; } </ script> - Abdallah Abdalaziz

我遇到了这个错误：'null'不是一个对象（在评估'$（'#nav li'）.length'时）。 - Abdallah Abdalaziz

将您的jQuery代码放在$(document).ready(function() { ... });中，其中...是您的代码。它在JSFiddle中可以工作，因为JSFiddle会自动为您包装JavaScript代码。 - Deryck

$(document).ready(function() { if( $('#nav li').length > 5 ) { $('#nav li:gt(3)').appendTo('#more'); } }); 没有起作用 :'( - Abdallah Abdalaziz

请将该脚本放置在您的<body>标签的末尾。 - Deryck