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

Question

这是我的 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>

谢谢！

Answer 1

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

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

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

Example Fiddle

Answer 2

试试这个

http://jsfiddle.net/Lvuuxc1w/

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

Answer 3

你可以这样做。

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

这是Fiddle

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

change order of <li> in JS/Jquery

html

javascript

django

jquery

html-lists