在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

你可以这样做。

<select id="yeardialog" name="yeardialog" onchange="onYearChange()">
  <option value="">--</option>
  <option value="1990">1990</option>
  <option value="1991">1991</option>
  <option value="1992">1992</option>

</select>
<select id="monthdialog" onchange="onMonthChange()">
  <option></option>
</select>

<select id="datedialog">
  <option></option>
</select>

以下是Fiddle