如何根据当天重新排列网页上列表的顺序？答案

【问题标题】：How do I rearrange the order of a list on a web page based on the current day?如何根据当天重新排列网页上列表的顺序？
【发布时间】：2011-12-19 23:00:02
【问题描述】：

我正在为一家餐馆创建一个网站，而每日特价列表占用了太多垂直空间。每个<li> 都包含星期几、特殊名称和描述。

我想使用jScrollPane 封装列表。

但是，这需要用户滚动才能找到当天的特别活动。

所以，我希望当天的特价商品始终显示在顶部，其他特价商品如下所列。例如，如果今天是星期三，则列表将按如下顺序排列：

星期三
星期四
星期五
星期六
星期日
星期一
星期二

在可预见的未来，特价不会改变。目前我将它们放在一个无序列表中（<ul>）。实现这一目标的最佳方法是什么？

【问题讨论】：

你可以使用任何服务器端代码吗？如果有，是什么语言？

标签： php javascript jquery

【解决方案1】：

我能想到的最简单的事情就是在每日特价列表上方复制今天的特价。

例如，您可以在 ID 为 todaysSpecial 的每日特价商品上方创建一个新的空 div。然后您可以将 li 中的内容复制到该容器中。

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

新的 Date().getDay() 函数将返回 0 到 6 之间的整数，因此需要列出周日至周六的每日特价商品。一点模数运算可以让您更改列表从一周中的哪一天开始。

【讨论】：

【解决方案2】：

好吧，如果您将它们放在如下数组中：

$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
);

【讨论】：

如果您不是在寻找 PHP 解决方案，您可以使用 javascript 并使用相同的逻辑移动 <ul> 标题（带有 <li> 正文）。

【解决方案3】：

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

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

【讨论】：

感谢所有回复的人！直到今晚我才能解决这个问题，我设法使用 adeneo 的代码让它工作。你们都很棒！