Как установить DIV или LI "класс" по дням недели? - PullRequest
Новая
       4

Как установить DIV или LI "класс" по дням недели?

0 голосов
/ 30 марта 2012

Если у меня есть 7-дневный календарь с DIV и UL на каждый день, как я могу добавить класс «сегодня» к «дню» ЛИ для дня недели? (т.е. понедельник, вторник, среда и т. д.)

По сути, я просто хочу выделить день недели при загрузке страницы.

Я предполагаю, что это может быть достигнуто с помощью 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>

Ответы [ 5 ]

3 голосов
/ 30 марта 2012

Вы можете попробовать что-то вроде следующего: 

$('li.day:eq(' + new Date().getDay() + ')').addClass('today');
2 голосов
/ 30 марта 2012

Вот мой скрипач надеюсь, это поможет.Если у вас есть вопросы, дайте мне знать.

1 голос
/ 30 марта 2012 
var dayOfWeek = new Date().getDay() - 1;
var selectedUl = $('#weekly_schedule:nth-child(' + dayOfWeek + ')');
// Do whatever you want with selectedUl, such as .addClass('highlighted')
0 голосов
/ 28 мая 2015

У меня была такая же проблема.Я предложил следующее решение с использованием 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();

Таким образом, это в основном добавляет класс "today" к тегу li в зависимости от того, какой сегодня день.

Полный рабочий пример вы можете увидеть здесь на моем коде - http://codepen.io/AdamCCFC/pen/XbNyeY

0 голосов
/ 30 марта 2012

Вы можете сделать это без jQuery и просто использовать простой JavaScript: 

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

Вот пример jsFiddle .

...