过滤和排序div

Question

我一直在寻找一种强大而简单的方法来对案例进行排序，但经过几个小时和堆栈溢出的搜索，我找不到一种方法来过滤我想要的案例。

基本上，我将使用css类为每个案例提供三个类别(生产年份、项目类型和名称)，例如，标记将如下所示

<div class="name1 home 2013"></div>
<div class="name2 work 2012"></div>
<div class="name3 home 2012"></div>
<div class="name4 charity 2012"></div>
<div class="name5 home 2010"></div>
<div class="name6 work 2007"></div>

然后我想要有按钮，这样你就可以选择你想按哪个类别对案例进行排序。所以就像这样。

<div class="button" id="year">Sort by Year</div>
<div class="button" id="alpha">sort Alphabetically</div>
<div class="button" id="type">sort by type</div>

这就是我被卡住的地方。我可以创建什么javascript函数，以便如果您单击按钮“按年份排序”，它将创建一个如下所示的标记。例如，将同一年的所有案例分类到div中。

<div>
   <div class="name1 home 2013"></div>
</div>

<div>
<div class="name2 work 2012"></div>
<div class="name3 home 2012"></div>
<div class="name4 charity 2012"></div>
</div>

<div>
<div class="name5 home 2010"></div>
</div>

<div>
<div class="name6 work 2007"></div>
</div>

Answer 1

我会使用数据属性来简化过滤。

<div class="name1 home" data-year="2013">2013</div>
<div class="name2 work" data-year="2012">2012</div>
<div class="name3 home" data-year="2012">2012</div>
<div class="name4 charity" data-year="2012">2012</div>
<div class="name5 home" data-year="2010">2010</div>
<div class="name6 work" data-year="2007">2007</div>

使用JQuery和array.map (如果你想要更老的浏览器支持，可以用foreach代替)

var studies = $('[data-year]')

studies.map(function(index, el) {
    var $el = $(el)
    year = $el.attr('data-year')
    if($('#' + year).length == 0){
        $(document.body).append(
            $('<div>').attr('id', year)
            .css('margin-bottom', '20px')
        )
    }

    $('#' + year).append(el)
 })

这样做的目的是获取所有具有data-year属性的元素，foreach元素检查具有该元素年份id的div是否存在。如果没有创建，则将其附加到正文中。然后将元素附加到年份容器中。

see this jsfiddle