如何使用jquery将元素移动到第三个位置？

请帮我做这个。我有：

<ul>
  <li>
    <h2>Headline for element 1</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 2</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 3</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 4</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
  <li>
    <h2>Headline for element 5</h2>
    <p>Lorem ipsum dolor sit amet quosque tandem.</p>
  </li>
</ul>

但是它不适用于第一个和第二个元素。

尝试更改为

$（this）。insertAfter（“ulli:eq（1）”

“但它不适用于第一个和第二个元素。”

这是因为当你移动物品时，其他物品会向上移动以填补空白。我建议您首先计算有问题的项，然后在重新插入分离的项之前计算其余元素的中间位置

还请注意，您在此处创建的变量：

var third = $("ul li:eq(1)");

…将引用列表中的第二项，就像第一次加载文档时一样。当列表重新排序时，它不会自动更新以引用第二项。（另外，有一个名为
third
的变量引用第二项也没有意义。）您需要计算
处理程序中的中间位置。单击（）

jQuery(document).ready(function(){
  $("ul li").click(function() {
    $("li.active").removeClass("active"); //Remove any "active" class
    var $active = $(this).detach().addClass("active"),
        $lis = $("ul li");
    $active.insertBefore($lis.eq(Math.floor($lis.length / 2)));
  });
});

演示：

jQuery(document).ready(function(){
  $("ul li").click(function() {
    $("li.active").removeClass("active"); //Remove any "active" class
    var $active = $(this).detach().addClass("active"),
        $lis = $("ul li");
    $active.insertBefore($lis.eq(Math.floor($lis.length / 2)));
  });
});