在 JS/Jquery 中更改 <li> 的顺序答案

【问题标题】：change order of <li> in JS/Jquery在 JS/Jquery 中更改 <li> 的顺序
【发布时间】：2015-10-11 18:32:24
【问题描述】：

这是我的 django 生成的导航菜单：

<nav class="nav-collapse"> 
 <ul>
     <li id="1">1</li>
     <li id="2">2</li>
     <li id="3">3</li>
     <li id="4">4</li>

     <li id="logo"><img/></li> <!-- this <li> is added by me -->

 </ul>
</nav>

如何使用 javascript 或 jQuery 使其看起来像这样：

<nav class="nav-collapse"> 
 <ul>
     <li id="1">1</li>
     <li id="2">2</li>

     <li id="logo"><img/></li>

     <li id="3">3</li>
     <li id="4">4</li>
 </ul>
</nav>

谢谢！

【问题讨论】：

你试过了吗？

标签： javascript jquery html django html-lists

【解决方案1】：

试试这个

http://jsfiddle.net/Lvuuxc1w/

$( "<li id='logo'><img/></li>").insertBefore( "#3" );

【讨论】：

谢谢大家！我去了这个:)

【解决方案2】：

你可以这样做。

var logoHtml='<li id="logo"><img/></li>';
$(".nav-collapse").find("li").eq(1).append(logoHtml);

这里是Fiddle

【讨论】：

如果页面上已经有一个<li id="logo">，这不会添加另一个<li id="logo"> 吗？

【解决方案3】：

您可以使用insertAfter() 分离元素，然后将其插入您想要的位置：

$("#logo").insertAfter("#2");

这实际上会将#logo 从底部移动到#2 和#3 之间。

Example Fiddle

【讨论】：

分离部分是多余的，已经被分离以便插入jsfiddle.net/opwdv10s/2
@charlietfl 好电话，已修复。