Question

我按日期排序div的网格，但我遇到了问题。 div按日期排序，但是当你引入另一个月时，它不会考虑到这一点，只是按日值排序。

HTML：

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

 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
    }
});
});
});
});

所以块正在被排序，但最后一个日期0562013首先出现，因为05是我假设的最小数字，无论如何还要考虑月份，所以它会成功排序按日期划分？

Answer 1

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
    }

});
});

Answer 2

您需要更改日期格式。现在的方式是，您无法区分日期和月份：2122013可以是2.12.2013以及21.2.2013。

我建议使用常见的Y-M-D（年月日，例如2013-03-07）格式。
默认情况下可以排序。您无需更改任何其他内容。

jQuery：按日期排序的同位素

2 个答案: