如何按星期几设置 DIV 或 LI “类”？答案

【问题标题】：How to set a DIV or LI "class" by day of the week?如何按星期几设置 DIV 或 LI “类”？
【发布时间】：2012-03-30 19:07:34
【问题描述】：

如果我有一个 7 天日历，其中每一天都有一个 DIV 和 UL，我如何将“今天”类添加到一周中某天的 LI“日”？（即周一、周二、周三等）

基本上我只想在页面加载时突出显示星期几。

我认为这可以通过 jQuery 来完成，但我只是掌握了窍门，所以任何能指出我正确方向的建议都将不胜感激。

这是我用于内容的基本 HTML：

  <div id="main_content">
   <div id="weekly_schedule">
     <ul class="day_container">
       <li class="day">Su</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Mo</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Tu</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">We</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Th</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Fr</li>
       <li class="day_content">content</li>
     </ul>
     <ul class="day_container">
       <li class="day">Sa</li>
       <li class="day_content">content</li>
     </ul>
  </div>
</div>

【问题讨论】：

你的html是静态的，不是动态生成的？
api.jquery.com/addClass
如果今天是星期日，您希望突出显示“su”，还是希望突出显示一周中的所有时间？
HTML 容器是静态的，但内容是动态生成的。
@DG3 我想在星期天等换一下 LI 和 Su 的背景。

标签： javascript jquery date html html-lists

【解决方案1】：

您可以尝试以下方法：

$('li.day:eq(' + new Date().getDay() + ')').addClass('today');

【讨论】：

您的解决方案要简单得多。在 OPs 问题中，第一个 li 是星期日，我认为您不需要“-1”，因为它将在星期四返回，今天是星期五。我希望我能这样想，我通过使用日期对象的 getDay() 来使用 switch case 语句。
@DG3 正确，我实际上删除了-1 :)
轰隆隆！简单易行的解决方案。谢谢！

【解决方案2】：

这是我的fiddler，希望对您有所帮助。如果您有任何问题，请告诉我。

【讨论】：

【解决方案3】：

var dayOfWeek = new Date().getDay() - 1;
var selectedUl = $('#weekly_schedule:nth-child(' + dayOfWeek + ')');
// Do whatever you want with selectedUl, such as .addClass('highlighted')

【讨论】：

据我所知，dayOfWeek 将基于 1，而索引基于 0。不是这样吗？

【解决方案4】：

你可以不使用 jQuery 而只使用纯 JavaScript：

var date = new Date().getDay()*2;
document.getElementsByTagName('LI')[date].parentNode.className += " today";

这是一个jsFiddle example。

【讨论】：

这假定给定的 <li /> 元素是整个文档中唯一的元素，这可能不是一个安全的选择。
这似乎是最简单的解决方案，但是当我在错误控制台中检查它时，为什么会在脚本末尾收到带有“â€‹”的错误“非法字符”？
@NewWorldOrderly - 错误出现在您的网站或 jsFiddle 上？
我从 jsFiddle 复制了代码，当我在我的网站上测试它时出现错误。
@NewWorldOrderly - 复制/粘贴中可能出现了问题。输入它应该可以工作。

【解决方案5】：

我也遇到了同样的问题。我使用 JavaScript 提出了以下解决方案（尽管我不确定这是否是最好的方法）。

HTML：

<div id="days">
  <ul>
    <li id="mon">Mon</li>
    <li id="tue">Tue</li>
    <li id="wed">Wed</li>
    <li id="thur">Thur</li>
    <li id="fri">Fri</li>
    <li id="sat">Sat</li>
    <li id="sun">Sun</li>
  </ul>
</div>

JavaScript：

function startTime() {
  var today = new Date();
  var dayOfWeek = today.getDay();
  if (dayOfWeek == 0) {
    document.getElementById("sun").className = "today";
  } else if (dayOfWeek == 1) {
    document.getElementById("mon").className = "today";
  } else if (dayOfWeek == 2) {
    document.getElementById("tue").className = "today";
  } else if (dayOfWeek == 3) {
    document.getElementById("wed").className = "today";
  } else if (dayOfWeek == 4) {
    document.getElementById("thur").className = "today";
  } else if (dayOfWeek == 5) {
    document.getElementById("fri").className = "today";
  } else if (dayOfWeek == 6) {
    document.getElementById("sat").className = "today";
  } else {}
}

startTime();

所以这基本上将“今天”类添加到 li 标签中，具体取决于它是哪一天。

您可以在我的 codepen 上查看完整的工作示例 - http://codepen.io/AdamCCFC/pen/XbNyeY

【讨论】：