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