Question

你好，

我一直在寻找某种jQuery插件来做我需要的东西，但到目前为止还不喜欢那种我需要的东西。

我使用我们的CMS为客户创建了一个网络应用程序，他们可以输入即将运行的网络研讨会的详细信息。

用户输入的部分数据是日期（01 - 31）和月份（JAN - DEC），它出现在我用CSS制作的小日历元素中。将月份放入MONTH内，并将日期放入DAY，如下例所示。

然后将它们以网格堆栈的形式放到页面上。

我似乎无法做到的是找到一种方法来使用它来命令这些元素特定数据。

非常感谢任何帮助！

<div class="webinar-item">
    <div class="cal">
        <span class="m">sep</span>
        <span class="d">14</span>
    </div>

    <div class="data">
        <a href="#" title="Webinar Title">
            <h2>Webinar Title</h2>

            <span class="clearfix st Specific-Times">
                <span class="s">
                    <em>Start:</em>10:00am
                </span>
                <span class="f">
                    <em>Finish:</em>12:30pm
                </span>
            </span>

            <span class="price">
                <em>Price:</em>FREE
            </span>

            <p class="overview-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt sagittis nunc. Curabitur mollis hendrerit diam ac iaculis. Phasellus velit neque, aliquet eu viverra a, congue id sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec magna justo, viverra nec bibendum semper, porttitor pellentesque purus. In ante metus, tincidunt eu suscipit sit amet, imperdiet id justo. Phasellus elementum egestas nibh, vitae sodales nunc aliquet non.
            </p>
        </a>
        <a href="#">go to meeting</a>
    </div>
</div>

P.S。为了订购，没有什么能阻止我多次提取这些数据。

Answer 1

理想情况是将数据属性添加到webinar-item，其中的字符串日期采用Date.parse重新识别的格式。 jquery可以使用data()方法获取或设置此数据。也可以通过您可能为用户实现的日期选择器轻松实现。

<div class="webinar-item" data-date="12/15/2012">/* add hours/mins*/

然后可以使用UTC时间生成自定义分拣机。

function sortDate( a, b){
  return parseDate(a) > parseDate(b) ? true :false;    
} 

function parseDate( el){
    return Date.parse($(el).data('date'));
}

 $('#content').html( $('.webinar-item').sort(sortDate));

DEMO http://jsfiddle.net/TxFqu/2

编辑：更好的是，只需将UTC时间存储在data-date属性中，并在此部分代码中完全删除Date.Parse

Answer 2

这就是我要做的事。

function sortItems(descending) {
    descending = !!descending;
    // converts it into a boolean
    var months = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'];
    // define your months here
    var items = $('.webinar-item').get();
    // get all the available nodes
    var parent = $('.webinar-item').parent();
    // assuming there's a unique, single parent
    var year = (new Date()).getFullYear();
    // assuming it's the current year
    items.sort(function(a,b) {
        var m1 = months.indexOf($(a).find('>.cal>.m').text()); // month 1
        var d1 = parseInt($(a).find('>.cal>.d').text()); // day 1
        var m2 = months.indexOf($(b).find('>.cal>.m').text()); // month 2
        var d2 = parseInt($(b).find('>.cal>.d').text()); // day 2
        var dt1 = new Date(year,m1,d1);
        var dt2 = new Date(year,m2,d2);
        if (descending)
            return dt1 > dt2 ? -1 : (dt1 < dt2 ? 1 : 0);
        return dt1 > dt2 ? 1 : (dt1 < dt2 ? -1 : 0);
    });
    $.each(items,function(idx,elm) { parent.append(elm) });
}

您可以将此功能称为sortItems();升序，sortItems(true);降序。

按用户输入的日期排序div - jquery

2 个答案: