如何使用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> 

而这正是我想做的事：

• 每当你点击一个列表项，它移动到中间位置（第三位）和应用类“活动”。

我有这样的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)"); 

...将参照第二项列表中，因为这是第一次加载文档时。它确实不是自动更新以在列表重新排序时引用第二项。 （另外，它没有意义的，有一个名为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)");