循环抓取HTML日历日期数据属性

时间:2017-05-19 22:26:05

标签: javascript jquery loops custom-data-attribute

我正在操纵一个WordPress日历插件。我试图在日历上添加一些CSS到当前日期的每一天。我使用的插件将日历放在表格中。个人日的代码如下所示:

<td class="day-with-date" data-date="2017-5-10">
  <div class="day-number">10</div>
</td>

我试图使用jQuery循环数据属性中的日期。

这是我的剧本。

    $('.day-with-date .day-number').each(function(element){

    var dataNumber = "[data-date=" + $(this).text() + "]"; 
    var dataDateDay = "[data-date="+day+"]";        
    var textDay = $(this).text();

    if(textDay <= day){

        $('td.day-with-date .day-number').addClass('online-display');

    }else if(textDay > day){

        $('td.day-with-date .day-number').removeClass('online-display');

    }else{
        console.log("error douche");
    }

});

它正在做的是添加CSS,因为textDay是&lt; = than day。但它应用后删除了课程。我试图让CSS添加到今天的所有日期,然后在几天后删除CSS。

如何遍历日历日期,然后将我的CSS类应用到当前日期的所有日期?

提前致谢!

2 个答案:

答案 0 :(得分:0)

试试这个

... // day has been defined

$('.day-with-date .day-number').each(function(element){

  var parsedDay = Number.parseInt(element.text());
  if(parsedDay <= day){
      element.addClass('online-display');
  } else {
      element.removeClass('online-display');
  }
});

答案 1 :(得分:0)

您的.each功能需要进行更改:

$('.day-with-date .day-number').each(function(index) {

  var dataNumber = "[data-date=" + $(this).text() + "]";
  var dataDateDay = "[data-date=" + day + "]";
  var textDay = $(this).text();

  if (textDay <= day) {
    $(this).addClass('online-display');
  } else if (textDay > day) {
    $(this).removeClass('online-display');
  } else {
    console.log("error douche");
  }
});

您可以在此处试用:https://jsfiddle.net/k99o5b39/