jquery - jQuery on click 将 div 添加到“列表”的前面

Question

我在一个页面上显示了几个 div 'inline-block'。它们按类别分组，例如类别 1 中的 4 个 div（均具有类 .category1）、类别 2 中的 3 个 div（均具有类 .category2）和类别 3 中的 5 个 div（均具有类 .category3）。我也有所有类别的链接。我想要做的是，当您单击链接时，该类别中的 div 都将移动到“列表”的前面......当您继续单击不同的类别链接时，依此类推。

到目前为止，我已经让 div 从任何地方消失了，但是我怎样才能让它们重新出现在我的列表的前面呢？

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

Answer 1

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>

Answer 2

您应该能够使用 jQueryprepend()函数：

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

prepend()并将append()移动现有元素。

您还应该能够改进此代码，但我不能不了解您的代码和 html。