javascript - jQueryeach() 方法不适用于 append 元素

Question

我正在尝试将 tr 及其内部标签 append 到我的表格中。当文档准备好时，此功能就会发生。然后使用 .each() 方法，我尝试向 append 的 tr 元素添加一些类。但 jQuery 似乎无法识别我 append 的 html 内容。我应该怎么做才能解决我的问题？谢谢大家。

我想要 append 它们的html内容:

let appndContent = '<tr class="RoomTableTr" style="background-color: red;">\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2 borderedTd">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
  '<td class="RoomTableTd v2">\n' +
    '<p class="costPerDays costInTable"></p>\n' +
    '<p class="costPerDays">ریال</p>\n' +
  '</td>\n' +
'</tr>';

$('.DepartureDate').each(function() {
  let day = parseInt($(this).val().substring(8, 10)),
    month = parseInt($(this).val().substring(5, 7)),
    year = parseInt($(this).val().substring(0, 4)),
    DayOfWeek = new persianDate();
  DayOfWeek.date(day);
  DayOfWeek.month(month);
  DayOfWeek.year(year);
  let TheDay = DayOfWeek.format('dddd');

  let CostInf = $(this).parent().parent().find('.CostInf').val();
  switch (TheDay) {
    case 'شنبه':
      $(".RoomTableTr td:nth-child(1) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'یکشنبه':
      $(".RoomTableTr td:nth-child(2) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'دوشنبه':
      $(".RoomTableTr td:nth-child(3) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'سه شنبه':
      $(".RoomTableTr td:nth-child(4) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'چهار شنبه':
      $(".RoomTableTr td:nth-child(5) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'پنج‌شنبه':
      $(".RoomTableTr td:nth-child(6) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    case 'جمعه':
      $(".RoomTableTr td:nth-child(7) .costInTable").empty().append(CostInf).parent().addClass('DepartureDateMark');
      break;
    default:
      break;
  }
  let lastDay = $(this).parent().find('.DepartureDateMark').last();
  lastDay.attr('data-lastDay', true);
  lastDay.addClass('data-lastDay');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您应该在 switch-case 中使用变量“appndContent”之前 append 它(例如在每个函数之前)。如果您在 switch-case 之后 append 该查询或尚未 append 该查询，则此查询将不起作用。