3

日付付きの今後のイベントのリストがあります。JQuery コード/プラグインはありますか:

1) 最新の日付順にイベントのリストを最初に並べます。
2) イベント当日の一定時間までに最新のイベントを消滅させる。
3) 1 年間に予定されているイベントのリストが 15 個あるとします。すべての時間に 6 個のイベント リストを表示したいとします。

<div id="event">
    <ul>
        <li><a href="single's_weekend.html">Single's WeekEnd</a><p>Sat &amp; Sun, Nov 10th - 11th 2013</p></li>
        <li><a href="women's_conference.html">Women's Con.</a><p>Sunday, May 20th 2013</p></li> 
        <li><a href="children's_day.html">Children's Day</a><p>Sunday, May 27th 2013</p></li>   
        <li><a href="couple's_retreat.html">Couple's Retreat</a><p>Fri-Sun, June 1st - 3rd 2013</p></li> 
        <li><a href="week_of_prayer.html">Week of Prayer</a><p>Mon-Sun, Sept 3rd - 8th 2013</p></li>
        <li><a href="annual_conference_2012.html">Annual Conference 2013</a><p>Wed-Sun, October 3rd - 7th 2013</p></li> 
    </ul>                       
</div>
4

2 に答える 2

1

ここに作業コードがあります... jsFiddle: http://jsfiddle.net/KrTNJ/1/

次の 3 つの機能が実装されています。

並べ替えイベント

リストを終了日順にソートし、各 li 要素に id を追加します。

removeOldEvents

今日までに終了するイベントを削除します。これは、タイマーなどで、または起動中に呼び出すことができます。これは、sortEvents が既に実行されている場合にのみ機能します。

displaySome(カウント)

"count" エントリのみを表示します。これは、sortEvents が既に実行されている場合にのみ機能します。


// Uses jQuery

$(document).ready(function(){
    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    var month_index = function(target) {
        target = target.toLocaleLowerCase();
        return jQuery.inArray(true, jQuery.map(months, function(s) {
            return s.toLocaleLowerCase().indexOf(target) > -1;
        })) + 1;
    };

    function getKeys(obj) {
        var keys = [];
        for(var key in obj) {
            if(obj.hasOwnProperty(key)) {
                keys.push(key);
            }
        }

        return keys;
    }

    function sortEvents() {
        eventList = new Object();

        $("#event ul li").each(function(index, value) { 
            dates = $(this).children("p")[0];
            dates = $(dates).text().split(",")[1].trim();

            m = dates.split(" ");

            if(dates.search("-") != -1) {
                m.splice(1, 2);
            }

            m[1] = m[1].substring(0, m[1].length - 2);

            month = month_index(m[0])

            id = m[2] + "-" + (month < 10 ? "0" + month : month) + "-" + (m[1] < 10 ? "0" + m[1] : m[1]);

            eventList[id] = "<li id='" + id + "'>" + $(this).html() + "</li>";
        });

        eventKeys = getKeys(eventList).sort();
        $("#event ul").empty();

        for(i = 0; i < eventKeys.length; i++) {
            $("#event ul").append(eventList[eventKeys[i]]);
        }
    }

    function removeOldEvents() {
        $("#event ul li").each(function(index, value) { 
            a = $(this).attr('id').split("-");
            d = new Date(a[0], (a[1] - 1), a[2]);

            g = new Date();
            g.setHours(0,0,0,0);

            c = (d > g) - (g > d);

            if(c < 1) {
                // Remove
                $(this).remove();
            }
        });

        displaySome(6);
    }

    function displaySome(count) {
        $("#event ul").find('li:gt(' + (count - 1) + ')').hide();
    }

    sortEvents();

    removeOldEvents();

    displaySome(6);
});

お役に立てれば...

于 2012-12-25T07:40:25.410 に答える
0

データベースを使用してこれらすべてのイベントを保存している場合は、日付順による順序を使用して、現在の日付よりも大きい日付を選択し (日付 > 今日)、それらを 6 つに制限することができます ( limit by句を使用) 。

于 2012-12-24T11:37:11.557 に答える