2013-03-07 1 views
0

div로 구성된 그리드를 날짜순으로 정렬하고 있지만 문제가 발생했습니다. div는 날짜별로 정렬되지만 다른 달을 소개 할 때 고려하지 않으며 날짜 값에 따라 정렬됩니다.

HTML : 그래서 블록 분류되고있다jQuery : 동위 원소로 날짜순 정렬

jQuery(document).ready(function(){ 

var jQuerycontainer = jQuery('#main-grid'); 

if(location.hash!=""){ 
    var hashfilter = "." + location.hash.substr(1); 
    } 
    else{ 
    var hashfilter = "*"; 
    } 

jQuerycontainer.imagesLoaded(function(){ 
jQuerycontainer.isotope({ 
    filter: hashfilter, 
    itemSelector: '.grid-block', 
    getSortData : { 
    date : function(jQueryelem) { 
    return jQueryelem.attr('data-category'); 
    } 
    }, 
    sortBy : 'date', 
    animationEngine: 'css', 
    masonry: { 
    columnWidth: 4 
    } 

}); 
}); 

jQuery('.filter-menu a').click(function(){ 
    var selector = jQuery(this).attr('data-filter'); 
    var prettyselector = selector.substr(1); 
    location.hash = prettyselector; 
    jQuery('html, body').animate({scrollTop:0}, 'slow'); 
    return false; 
    }); 

jQuery('.grid-filter a').click(function(){ 
    var selector = jQuery(this).attr('data-filter'); 
    var prettyselector = selector.substr(1); 
    location.hash = prettyselector; 
    jQuery('html, body').animate({scrollTop:0}, 'slow'); 
    return false; 
    }); 

jQuery(window).hashchange(function(){ 

       if(location.hash!=""){ 
        var hashfilter = "." + location.hash.substr(1); 
       } 
       else{ 
        var hashfilter = "*"; 
       } 


jQuerycontainer.imagesLoaded(function(){ 
jQuerycontainer.isotope({ 
    filter: hashfilter, 
    itemSelector: '.grid-block', 
    getSortData : { 
    date : function(jQueryelem) { 
    return jQueryelem.attr('data-category'); 
    } 
    }, 
    sortBy : 'date', 
    animationEngine: 'css', 
    masonry: { 
    columnWidth: 4 
    } 
}); 
}); 
}); 
}); 

<div class="grid-filter"> 
    <a href="#"> 
    <div class="grid-block" style="background-color: #46747c" data-category="1952013"> 
     <div class="block-text date-title">19/05</div> 
    </div> 
    </a> 
</div> 
<div class="grid-filter"> 
    <a href="#"> 
    <div class="grid-block" style="background-color: #ebd133" data-category="2552013"> 
     <div class="block-text date-title">25/05</div> 
    </div> 
    </a> 
</div> 
<div class="grid-filter"> 
    <a href="#"> 
    <div class="grid-block" style="background-color: #cc7788" data-category="3052013"> 
     <div class="block-text date-title">30/05</div> 
    </div> 
    </a> 
</div> 
<div class="grid-filter"> 
    <a href="#"> 
    <div class="grid-block" style="background-color: #46747c" data-category="0562013"> 
     <div class="block-text date-title">05/06</div> 
    </div> 
    </a> 
</div> 


jQuery를,하지만 05 내가 가정 작은 숫자로 날짜 0562013 먼저 나타나고있다와 마지막 하나입니다 어쨌든 달을 고려하여 날짜별로 div를 성공적으로 정렬합니까?

답변

0
jQuerycontainer.imagesLoaded(function(){ 
jQuerycontainer.isotope({ 
    filter: hashfilter, 
    itemSelector: '.grid-block', 
    getSortData : { 
    date : function(jQueryelem) { 
    return date.substring(4,8)+date.substring(2,4)+date.substring(0,2); 
    } 
    }, 
    sortBy : 'date', 
    animationEngine: 'css', 
    masonry: { 
    columnWidth: 4 
    } 

}); 
}); 
+0

이것이 작동하지 않는 것 같습니다. 날짜순으로 div를 정렬하지 않는 것 같습니다. – user1374796

+0

나는 편집 된 것을 시도해도 무작위 순서로 div를 정렬하는 것처럼 보였다. 위의 그림으로 변경 한 것을 보았습니다. 그 작업을 시도했지만 아직 작동하지 않습니다. – user1374796

+0

월에 0을 추가하여 날짜를 생성하는 방법을 변경할 수 있습니까? – TizianoPiccardi

0

날짜 형식을 변경해야합니다. 현재와 ​​같이 일과 월을 구별 할 수 없습니다. 21220132.12.201321.2.2013이 될 수 있습니다.

보통 Y-M-D (년 - 월 - 일, 예 : 2013-03-07) 형식을 제안합니다.
기본적으로 정렬 가능합니다. 다른 것을 변경할 필요가 없습니다.