将课程添加到已经过去的日子

Question

我有一个在DOM中看起来像这样的降临日历：

<div class="calendar">
    <div class="item  canopen" tabindex="0" id="xitem-1" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-2" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-3" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-4" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-5" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-6" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-7" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-8" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-9" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-10" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-11" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-12" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-13" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-14" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-15" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-16" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-17" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-18" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-19" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-20" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-21" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-22" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-23" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-24" onclick="this.focus();">
</div>

该操作从十二月的第一天开始。 我想将类is--closed添加到每个具有item类的元素中，直到今天。例如：

我们今天是 12月4日，所以我想使用DOM：

<div class="calendar">
    <div class="item is--closed canopen" tabindex="0" id="xitem-1" onclick="this.focus();">
    <div class="item is--closed canopen" tabindex="0" id="xitem-2" onclick="this.focus();">
    <div class="item is--closed canopen" tabindex="0" id="xitem-3" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-4" onclick="this.focus();">
    <div class="item  canopen" tabindex="0" id="xitem-5" onclick="this.focus();">
    ...
</div>

我只能使用jQuery！

Answer 1

您可以尝试以下代码。获取当前日期，然后将其与每个div的ID进行比较，然后使用filter

添加类

注意：您尚未为不正确的HTML的每个div添加结束</div>标记，因此请先添加

$(function(){
   var today = new Date();
   var day = today.getDate();
   //console.log(day);
   $('div.calendar div.canopen').filter(function(){
       var id = $(this).attr('id');
       id = id.replace('xitem-','');
       id = parseInt(id);
       return id < day;
   }).addClass('is--closed');
});

.is--closed {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calendar">
    <div class="item  canopen" tabindex="0" id="xitem-1" onclick="this.focus();">1</div>
    <div class="item  canopen" tabindex="0" id="xitem-2" onclick="this.focus();">2</div>
    <div class="item  canopen" tabindex="0" id="xitem-3" onclick="this.focus();">3</div>
    <div class="item  canopen" tabindex="0" id="xitem-4" onclick="this.focus();">4</div>
    <div class="item  canopen" tabindex="0" id="xitem-5" onclick="this.focus();">5</div>
    <div class="item  canopen" tabindex="0" id="xitem-6" onclick="this.focus();">6</div>
    <div class="item  canopen" tabindex="0" id="xitem-7" onclick="this.focus();">7</div>
    <div class="item  canopen" tabindex="0" id="xitem-8" onclick="this.focus();">8</div>
    <div class="item  canopen" tabindex="0" id="xitem-9" onclick="this.focus();">9</div>
    <div class="item  canopen" tabindex="0" id="xitem-10" onclick="this.focus();">10</div>
    <div class="item  canopen" tabindex="0" id="xitem-11" onclick="this.focus();">11</div>
    <div class="item  canopen" tabindex="0" id="xitem-12" onclick="this.focus();">12</div>
    <div class="item  canopen" tabindex="0" id="xitem-13" onclick="this.focus();">13</div>
    <div class="item  canopen" tabindex="0" id="xitem-14" onclick="this.focus();">14</div>
    <div class="item  canopen" tabindex="0" id="xitem-15" onclick="this.focus();">15</div>
    <div class="item  canopen" tabindex="0" id="xitem-16" onclick="this.focus();">16</div>
    <div class="item  canopen" tabindex="0" id="xitem-17" onclick="this.focus();">17</div>
    <div class="item  canopen" tabindex="0" id="xitem-18" onclick="this.focus();">18</div>
    <div class="item  canopen" tabindex="0" id="xitem-19" onclick="this.focus();">19</div>
    <div class="item  canopen" tabindex="0" id="xitem-20" onclick="this.focus();">20</div>
    <div class="item  canopen" tabindex="0" id="xitem-21" onclick="this.focus();">21</div>
    <div class="item  canopen" tabindex="0" id="xitem-22" onclick="this.focus();">22</div>
    <div class="item  canopen" tabindex="0" id="xitem-23" onclick="this.focus();">23</div>
    <div class="item  canopen" tabindex="0" id="xitem-24" onclick="this.focus();">24</div>
    <div class="item  canopen" tabindex="0" id="xitem-25" onclick="this.focus();">25</div>
    <div class="item  canopen" tabindex="0" id="xitem-26" onclick="this.focus();">26</div>
    <div class="item  canopen" tabindex="0" id="xitem-27" onclick="this.focus();">27</div>
    <div class="item  canopen" tabindex="0" id="xitem-28" onclick="this.focus();">28</div>
    <div class="item  canopen" tabindex="0" id="xitem-29" onclick="this.focus();">29</div>
</div>

Answer 2

如何？

//var currentDay = new Date().getDate();
var currentDay = 4;
document.querySelectorAll(".calendar div[data-item]").forEach(function(element) {
  var item = element.dataset.item;
  if ( item < currentDay ) {
      element.classList.add("is-closed");
    }
});

.item {
  font-weight: 800;
}

.is-closed {
  color: red;
}

<div class="calendar">
    <div class="item canopen" data-item="1" id="xitem-1" onclick="this.focus();">1</div>
    <div class="item canopen" data-item="2" id="xitem-2" onclick="this.focus();">2</div>
    <div class="item canopen" data-item="3" id="xitem-3" onclick="this.focus();">3</div>
    <div class="item canopen" data-item="4" id="xitem-4" onclick="this.focus();">4</div>
    <div class="item canopen" data-item="5" id="xitem-5" onclick="this.focus();">5</div>
    <div class="item canopen" data-item="6" id="xitem-6" onclick="this.focus();">6</div>
    <div class="item canopen" data-item="7" id="xitem-7" onclick="this.focus();">7</div>
    <div class="item canopen" data-item="8" id="xitem-8" onclick="this.focus();">8</div>
    <div class="item canopen" data-item="9" id="xitem-9" onclick="this.focus();">9</div>
    <div class="item canopen" data-item="10" id="xitem-10" onclick="this.focus();">10</div>
    <div class="item canopen" data-item="11" id="xitem-11" onclick="this.focus();">11</div>
    <div class="item canopen" data-item="12" id="xitem-12" onclick="this.focus();">12</div>
    <div class="item canopen" data-item="13" id="xitem-13" onclick="this.focus();">13</div>
    <div class="item canopen" data-item="14" id="xitem-14" onclick="this.focus();">14</div>
    <div class="item canopen" data-item="15" id="xitem-15" onclick="this.focus();">15</div>
    <div class="item canopen" data-item="16" id="xitem-16" onclick="this.focus();">16</div>
    <div class="item canopen" data-item="17" id="xitem-17" onclick="this.focus();">17</div>
    <div class="item canopen" data-item="18" id="xitem-18" onclick="this.focus();">18</div>
    <div class="item canopen" data-item="19" id="xitem-19" onclick="this.focus();">19</div>
    <div class="item canopen" data-item="20" id="xitem-20" onclick="this.focus();">20</div>
    <div class="item canopen" data-item="21" id="xitem-21" onclick="this.focus();">21</div>
    <div class="item canopen" data-item="22" id="xitem-22" onclick="this.focus();">22</div>
    <div class="item canopen" data-item="23" id="xitem-23" onclick="this.focus();">23</div>
    <div class="item canopen" data-item="24" id="xitem-24" onclick="this.focus();">24</div>
</div>