javascript - 下一个 td 添加类

Question

你能帮助我吗？JS 不是我的领域。我想在 td 之前的元素之后添加 td 类。我在表中有这个代码：

<td><span class="day event">24</span></td>
<td><span class="day">25</span></td>

如果 td before 是 class .event ，我每次都需要添加 td class .event 之后的下一个 td 将是 td class "after-event"

例子：

<td><span class="day event">24</span></td>
<td class="after-event"><span class="day">25</span></td>

即使单元格之间有 tr，我也需要它工作 谢谢！

这是WP插件的默认javascript：

   //Build calendar of a month from date
buildCalendar: function (fromDate, calendar) {
  var plugin = this;

  calendar.find('table').remove();

  var body = $('<table class="calendar"></table>');
  var thead = $('<thead></thead>');
  var tbody = $('<tbody></tbody>');

  //Header day in a week ( (1 to 8) % 7 to start the week by monday)
  for (var i = 1; i <= this.settings.days.length; i++) {
    thead.append($('<td class="day-name">' + this.settings.days[i % 7].substring(0, 3) + '</td>'));
  }

  //setting current year and month
  var y = fromDate.getFullYear(),
    m = fromDate.getMonth();

  //first day of the month
  var firstDay = new Date(y, m, 1);
  //If not monday set to previous monday
  while (firstDay.getDay() != 1) {
    firstDay.setDate(firstDay.getDate() - 1);
  }
  //last day of the month
  var lastDay = new Date(y, m + 1, 0);
  //If not sunday set to next sunday
  while (lastDay.getDay() != 0) {
    lastDay.setDate(lastDay.getDate() + 1);
  }


  for (var day = firstDay; day <= lastDay; day.setDate(day.getDate())) {
    var tr = $('<tr></tr>');
    //For each row
    for (var i = 0; i < 7; i++) {

      //  var td = $('<td><span class="day">' + day.getDate() + '<span class="room-price">12$</span>' + '</span></td>');
      var td = $('<td><span class="day">' + day.getDate() + '</span></td>');
      //if today is this day

      var ymd = day.getFullYear() + '-' + day.getMonth() + '-' + day.getDay();
      var ymd = this.formatToYYYYMMDD(day);
      //  console.log(ymd);
      if ($.inArray(this.formatToYYYYMMDD(day), plugin.events) !== -1) {
        //  console.log('found');
        td.find(".day").addClass("event");
        // tr.find(".test").addClass("event");
      }
      
      

      //if day is previous day
      if (day < (new Date())) {
        td.find(".day").addClass("wrong-day");
      }

      if (day.toDateString() === (new Date).toDateString()) {
        td.find(".day").addClass("today");
        td.find(".day").removeClass("wrong-day");
      }
      //if day is not in this month
      if (day.getMonth() != fromDate.getMonth()) {
        td.find(".day").addClass("wrong-month");
      }

      //Binding day event
      td.on('click', function (e) {
        // /alert('ok');
      });

      tr.append(td);
      day.setDate(day.getDate() + 1);
    }
    tbody.append(tr);
  }

  body.append(thead);
  body.append(tbody);

  var eventContainer = $('<div class="event-container"></div>');

  calendar.append(body);
  calendar.append(eventContainer);
}

标签： javascript

Answer 1

如果您的event课程仅使用您在线发布的 js 代码添加：

  if ($.inArray(this.formatToYYYYMMDD(day), plugin.events) !== -1) {
    td.find(".day").addClass("event");
  }

只需在其后添加这一行：

  if ($.inArray(this.formatToYYYYMMDD(day), plugin.events) !== -1) {
    td.find(".day").addClass("event");
    td.find(".day").parent().next().addClass("after-event");
  }

event如果您必须在 上设置类的逻辑，那将使用相同的逻辑td，并搜索相同的下一个兄弟姐妹td和类...

$("td").find(".day").addClass("event");
$("td").find(".day").parent().next().addClass("after-event");

.event {
  color: blue;
}

.after-event *{
  color: red !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="day">24</span></td>
    <td><span class="day">25</span></td>
  </tr>
</table>