如何使用jQuery同位素按日期(新)排序 [英] how to sort by date (new) with jquery isotope

查看:78
本文介绍了如何使用jQuery同位素按日期(新)排序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

请原谅我,因为我是JS的新手,只了解足够的知识.

Forgive me as I'm a bit novice to JS, just know enough to manipulate.

对于那些熟悉同位素的人( http://isotope.metafizzy.co/docs/sorting.html ),我在页面顶部有一个按日期排序的按钮.同位素发现元素

For those familiar with Isotope ( http://isotope.metafizzy.co/docs/sorting.html ), I have a button at the top of a page to sort by date. Isotope finds the element

<span class="date"> 01/04/2012 </span>

与此:

$container.isotope({
    getSortData : {
        date : function ( $elem ) {
        return $elem.find('.date').text();
}});

哪个可以正常工作,但我需要翻转(降低)日期顺序

Which works fine, but I need to flip (descend) the date order

同位素具有功能:

$('#container').isotope({ 
  sortBy : 'date',
  sortAscending : false
});

但是我无法使用它-只是使默认设置按日期排序,而不是单击时进行排序.我认为这只是语法问题...我如何/在何处放置sortAscending:false ??

But I can't get it to work - that just makes the default set sort by date, rather than sorting when I click. I think this is just a question of syntax... how/where can I put sortAscending: false ??

谢谢...

EDIT查看演示中的一些源,我看到:

<a href="#sortAscending=false">

可以完成,但是我已经通过传递了以下内容:

Can be done, but I'm already sorting by passing this:

<a href="#sortBy=date">

哪个从早些时候找到一个带有日期信息的跨度...

Which finds a the span from earlier with the date info...

推荐答案

这是我的做法, jsFiddle

$container.isotope({
    itemSelector: '.element',
    getSortData: {
        date: function ($elem) {
            return Date.parse($elem.find('.date').text());
        }
    }
});

日期的格式似乎无关紧要,并且可以升序和降序工作.

It doesn't seem to matter what format the date is in, and works ascending and descending.

parse()方法解析日期字符串,并返回日期字符串与1970年1月1日午夜之间的毫秒数.

The parse() method parses a date string and returns the number of milliseconds between the date string and midnight of January 1, 1970.

基本上,它将日期字符串转换为易于比较的漂亮实心数字.

Basically it turns your date strings into nice solid numbers which are easy to compare.

这篇关于如何使用jQuery同位素按日期(新)排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆