如何根据当前日期重新安排网页上的列表顺序

How do I rearrange the order of a list on a web page based on the current day?

本文关键字：列表 顺序 网页 新安排 何根 当前日期      更新时间：2023-09-26

我正在为一家餐厅做网站，每日特色菜列表占用了太多的垂直空间。每个<li>由星期几、特殊名称和描述组成。

我想用jScrollPane封装列表。

但是，这需要用户滚动屏幕来查找当天的特价节目。

所以，我想让当天的特价总是出现在顶部，其他特价在下面列出。例如，如果今天是星期三，列表将按如下顺序排列:

    周三
  • 周四
  • 周五
  • 周六
  • 周日
  • 周一
  • 周二

特色菜在可预见的将来不会改变。目前我有他们在一个无序列表(<ul>)。实现这一目标的最佳方法是什么?

我能想到的最简单的方法就是在每日特色菜列表上方复制今天的特色菜。

例如，您可以在每日特色菜上面创建一个新的空div, id为todaysSpecial。然后，您可以将li中的内容复制到该容器中。

$('#todaysSpecial').
  html($($('#specials>li')[new Date().getDay()]).html())

新的Date(). getday()函数将返回0到6之间的整数，因此需要列出周日到周六的每日特价。稍加模数运算就可以改变列表的起始日期

好吧，如果你有一个像下面这样的数组:

$specials = array(
  'Monday' => array(...),
  'Tuesday' => array(...),
  'Wednesday' => array(...),
  ...
  'Sunday' => array(...)
);

您可以利用date()和N格式化器根据日期偏移数组。然后像往常一样转储数组。例如http://www.ideone.com/Pb0ys 

$today = (int)date('N') - 1; // 1=Monday, ..., 7=Sunday
$specials = array_merge(
  array_slice($specials,$today),   // start with today+rest of week
  array_slice($specials,0,$today)  // move specials before today to the end
);

我会根据日期重新排列列表，应该不难。

<h1>Specials</h1><br />
<ul id="specials">
    <li id="day0">Sunday : Chinese</li>
    <li id="day1">Monday : Chicken</li>
    <li id="day2">Tuesday : Beef</li>
    <li id="day3">Wednesday : Cod</li>
    <li id="day4">Thursday : Salmon</li>
    <li id="day5">Friday : Taco</li>
    <li id="day6">Saturday : Pizza</li>
</ul>

重新排列:

var a = new Date().getDay();
for (var i=0; i<=6; i++) {
    if (a==7) {a=0}
    $("#specials").append( $("#day"+a) );
    a++;
}

这里有一个小提琴来展示它是如何工作的:http://jsfiddle.net/twU3m/

相关文章：