jQuery на клике preend divs перед фронтом 'list'

Question

У меня есть несколько div, на которых отображается «встроенный блок» на странице. Они сгруппированы в категории, например, 4 divs в 1 (все с классом. Category1), 3 divs в категории 2 (все с классом .category2) и 5 ​​divs в категории 3 (все с классом .category3). У меня также есть ссылки для всех категорий. То, что я пытаюсь сделать, - когда вы нажимаете ссылку, divs в этой категории все перемещаются в начало «списка» ... и так далее, когда вы продолжаете нажимать на ссылки разных категорий.

До сих пор я отклонял 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>