Question

我有几个div在页面上显示'inline-block'。它们按类别分组，例如cetgory 1中的4个div（全部带有类.category1），类别2中的3个div（全部带有类.category2）和类别3中的5个div（都带有类.category3）。我也有所有类别的链接。我要做的是，当你点击链接时，该类别中的div都被移动到'list'的前面....等等，当你继续点击不同的类别链接时。

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

$('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>

jQuery on click prepend divs到'list'的前面

2 个答案: