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

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

$(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');
});

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");
    }
});