Question

我正在一家餐馆的网站上工作，每日特价列表占据了太多的垂直空间。每个<li>包含星期几，特殊名称和说明。

我想使用jScrollPane封装列表。

但是，这需要用户滚动以找出当天的特殊内容。

所以，我希望当天的特价总是出现在顶部，其他特价列在下面。例如，如果今天是星期三，则列表将按如下方式排序：

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

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

Answer 1

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

例如，您可以使用id todaysSpecial在每日特价之上创建一个新的空div。然后，您可以将li中的内容复制到该容器中。

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

新的Date（）。getDay（）函数将返回0到6之间的整数，因此需要在星期日到星期六列出每日特价。一个小的模运算将允许您更改列表开始的星期几。

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

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

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

3 个答案: