過濾和排序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