添加下一个类

Question

你能帮我吗?JS不是我的领域…我想在td之前的元素之后添加td的类。我在表中有以下代码:

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

我需要添加td类每次如果在td之前是类事件event之后的下一个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);
}

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

这将使用相同的逻辑，你必须在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>