过滤和排序div

Question

我一直在寻找一种强大而简单的方法来排序我的案例研究，但几个小时后，我搜索堆栈溢出我找不到方法来过滤casestudies我想要的方式。

基本上，我会使用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 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) 
}) 

这样做是采取一切用数据year属性的元素是什么， foreach元素检查是否存在具有该元素年的id的div。如果它不创建一个并将其附加到身体。然后它将元素添加到年容器中。

see this jsfiddle