2

你好，

我一直在寻找某种 jQuery 插件来做我需要的，但到目前为止还没有一个能完全满足我需要的插件。

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

用户输入的部分数据是日期（01 - 31）和月份（JAN - DEC），它们出现在我用 CSS 制作的一个小日历元素中。正如您在下面的示例中看到的那样，月份被放入<span class="m">MONTH</span>其中，日期被放入。<span class="d">DAY</span>

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

我似乎无法做的是找到一种方法来使用该特定数据对这些元素进行排序。

任何帮助将非常感激！

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

PS 没有什么能阻止我为了订购而多次提取这些数据。

4

2 回答 2

4

理想的情况是添加一个数据属性，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));

演示 http://jsfiddle.net/TxFqu/2

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

于 2012-10-29T01:55:41.843 回答
0

这就是我要做的。

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);降序一样调用此函数。

于 2012-10-29T02:07:48.413 回答