divs 필터링 및 정렬

Question

저는 강력하고 간단한 방법으로 내 캐스 세이디를 분류 해 왔지만 두 시간 동안 스택 오버플로를 검색하면 원하는 방식으로 캐스케이드를 필터링 할 수있는 방법을 찾을 수 없었습니다. 마크 업이

<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> 

처럼 보일 것입니다 예를 들어

기본적으로 나는 그 때 나는 버튼을 갖고 싶어, CSS 클래스를 사용하여 (년 생산 프로젝트 이름의 유형) 각 사례 연구를 세 가지 범주를 줄 것이다 당신 때문에 당신이 분류하여 원하는 종류를 선택할 수 있습니다. 그래서 뭔가.

<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> 

여기가 내가 붙어 있습니다. 어떤 자바 스크립트 함수를 만들어서 "연도 별 정렬"버튼을 클릭하면 이렇게 보이는 마크를 만들 수 있습니다. 같은 해의 자본주의와 함께 divs에 모든 casestudies를 분류하는 예.

<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> 

은 Using 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) 
}) 

, foreach 엘리먼트는 해당 엘리먼트 연도의 id를 가진 div가 존재하는지 확인한다. 그것은 하나를 생성하고 본문에 추가하지 않는 경우. 그런 다음 요소를 연도 컨테이너에 추가합니다. 내용이 일반 DIV보다 테이블에 대해 더 잘 맞는 것처럼 보이는

see this jsfiddle