下一个 td 添加类答案

【问题标题】：Add class next td下一个 td 添加类
【发布时间】：2021-02-18 00:00:45
【问题描述】：

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

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

如果 td before 是 class .event，我每次都需要添加 td 类 .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);
}

【问题讨论】：

请贴出你试过的JS
你考虑过使用“CSS element+element Selector”吗？ (adjacent sibling)

标签： javascript

【解决方案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");
  }

如果您必须在td 上设置event 类，并搜索同一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>

【讨论】：