jQuery的事件按日期

Question

列出令我有日期即將到來的事件列表中，是否有任何的JQuery代碼/插件：

1）事件的順序列表的最新日期第一。
2）讓最近的活動在活動當天的特定時間消失。
3）假設我有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> 

Answer 1

這裏是一個工作碼...的jsfiddle：http://jsfiddle.net/KrTNJ/1/

三種功能被實現：

個

sortEvents

排序在結束日期的順序列表，並增加了一個id到每個li元素。

removeOldEvents

刪除其結束直到今天的事件。你可以在定時器或其他東西中，或在啓動過程中調用它。這隻適用於sortEvents已經被執行的情況。

displaySome（計數）

只顯示 「計數」 的條目。這隻適用於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); 
}); 

希望這有助於...

Answer 2

如果妳使用數據庫來存儲所有這些事件，你可以按日期倒序，然後選擇日期是比當前日期更大的使用順序（其中date>今天），只限制他們6 （使用限制由子句）