我有即将举行的事件列表和日期,是否有任何 JQuery 代码/插件:
1) 首先按最新日期对事件列表进行排序。
2) 让最新事件在事件当天的给定时间消失。
3) 假设我有 15 个今年即将发生的事件列表,我只想在每次给定时间出现 6 个事件列表。
<div id="event">
<ul>
<li><a href="single's_weekend.html">Single's WeekEnd</a><p>Sat & 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>
最佳答案
这是一个工作代码... jsFiddle: http://jsfiddle.net/KrTNJ/1/
实现了三个功能:
排序事件
按照结束日期的顺序对列表进行排序,并向每个 li 元素添加一个 id。
删除旧事件
删除今天结束的事件。您可以在计时器或其他东西中或在启动过程中调用它。仅当 sortEvents 已执行时才有效。
显示部分(计数)
仅显示“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);
});
希望这有帮助...
关于Jquery 事件列表按日期排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14020757/