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

Question

拜托，帮帮我。我有：

<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>

这就是我想要做的

• 每次单击列表项时，它都会移动到中心位置(第三个位置)，并应用类"active“。

我在jQuery上有这个：

jQuery(document).ready(function(){

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

$("ul li").click(function() {
$("ul li").removeClass("active"); //Remove any "active" class
$(this).insertAfter(third);
$(this).addClass("active"); //Add "active" class to selected tab
});
});

但是对于第一个元素和第二个元素，它不起作用。

Answer 1

“但对于第一个元素和第二个元素，它不起作用。”

这是因为当你移动项目时，其他项目会向上移动以填补空白。我建议您首先对所讨论的项进行.detach()，然后在重新插入分离项之前计算其余元素中的中间位置。

还请注意，您在这里创建的变量：

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

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

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)));
  });
});

演示：http://jsbin.com/avupud/1/edit

Answer 2

尝试更改为$(this).insertAfter("ul li:eq(1)");