jQuery on click 将 div 添加到“列表”的前面答案

【问题标题】：jQuery on click prepend divs to the front of a 'list'jQuery on click 将 div 添加到“列表”的前面
【发布时间】：2013-09-24 14:43:59
【问题描述】：

我在一个页面上显示了几个 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");
});

【问题讨论】：

标签： jquery css list html prepend

【解决方案1】：

你应该可以使用 jQuery prepend() 函数：

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

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

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

【讨论】：

这就是我想要的。它让我朝着正确的方向前进

【解决方案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>

【讨论】：