jQuery on click prepend divs'list'

Question

我有幾個div在頁面上顯示'inline-block'。它們分類在例子4中的所有類別（所有類別爲.category1），類別2中的3個div（所有類別爲.category2）和類別3中的5個div（所有類別爲.category3）中。我也有所有類別的鏈接。我試圖做的是，當你點擊鏈接時，該類別中的div全部移動到「列表」的前面......等等，當你繼續點擊不同的分類鏈接時。

到目前爲止，我已經讓divs無論身在何處，但我怎樣才能讓它們重新出現在我的列表前面？

$('li.menu_category1').click(function(){ 
$('.category1').css("display","none"); 
}); 

Answer 1

您應該能夠使用jQuery的prepend()功能：

$('li.menu_category1').click(function(){ 
    $('.category1').parent().prepend($('.category1')); 
}); 

prepend()和append()將移動現有元素。

你也應該能夠改進這個代碼，但是我不能不知道你的代碼和html。

Answer 2

http://jsfiddle.net/kasperfish/p68pH/2/

$(function() { 

    $('.btn').click(function(){ 

     c=$(this).html(); 
     $('.'+c).prependTo('body'); 


    }); 

}); 



<span class="btn">blue</span><span class="btn">green</span><span class="btn">yellow</span> 
<div class="blue"></div> 
<div class="blue"></div> 
<div class="blue"></div> 

<div class="green"></div> 
<div class="green"></div> 
<div class="green"></div> 

<div class="yellow"></div> 
<div class="yellow"></div> 
<div class="yellow"></div>