jQuery on click prepend divs to the front of a 'list'

Question

I have several divs displayed 'inline-block' on a page. They are grouped in categories for example 4 divs in caetgory 1 (all with class .category1), 3 divs in category 2 (all with class .category2) and 5 divs in category 3 (all with class .category3). I also have links for all of the categories. What I'm trying to do is, when you click the link, the divs in that category are all moved to the front of the 'list'....and so on when you continue to click on different category links.

So far I have made the divs dissapear from wherever they are, but how can I make them reappear at the front of my list?

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

Answer 1

You should be able to use the jQuery prepend() function:

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

prepend() and append() will move existing elements.

You should also be able to improve this code, but I can't without knowing more of your code and 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>