JQuery 在同一页面上找不到具有相同类的元素

Question

我正在尝试设置 HTML 元素的文本，但无法通过 JQuery 进行设置 类选择器 .text() 函数。它以某种方式无法找到要设置的元素。该函数在 document.ready() 函数中调用时能够找到该元素，但由于功能要求，我将其移至 API 调用中。 API 调用无法找到和设置一组特定的元素。页面上还有其他元素使用已成功设置的相同类。

下面记录的是我试图在其中设置值的列字段的两个引导网格表。请注意，它们存在于同一个 HTML 页面上。 目前只有 ItemTbl 中的列可以通过 $(".accrMonth").text(values) 函数设置和反映。 我试图在网页上切换他们的位置，但仍然只设置了 ItemTbl 附截图Output of searching for the class

function setDatesSO(dateString) {
  var dateParts = dateString.split("/");
  var reviewPeriod = new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0]);

  console.log("table 1: " + $("#test1").hasClass("accrMonth2"));
  console.log("table 1: " + $("#test2").hasClass("accrMonth1"));
  console.log("table 1: " + $("#test3").hasClass("accrMonth"));

  console.log("table 2: " + $("#test4").hasClass("accrMonth2"));
  console.log("table 2: " + $("#test5").hasClass("accrMonth1"));
  console.log("table 2: " + $("#test6").hasClass("accrMonth"));
  reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
  $(".accrMonth").text(reviewPeriod.toLocaleString('en-GB', {
    month: 'long'
  }));
  reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
  $(".accrMonth1").text(reviewPeriod.toLocaleString('en-GB', {
    month: 'long'
  }));
  reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
  $(".accrMonth2").text(reviewPeriod.toLocaleString('en-GB', {
    month: 'long'
  }));
}

<table id="OverviewTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
  <thead>
    <tr>
      <th data-column-id="accrMonth2" id="test1" class="accrMonth2">MONTH-3</th>
      <th data-column-id="accrMonth1" id="test2" class="accrMonth1">MONTH-2</th>
      <th data-column-id="accrMonth" id="test3" class="accrMonth">MONTH-1</th>
    </tr>
  </thead>
</table>

<table id="ItemTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
  <thead>
    <tr>
      <th data-column-id="accrMonth2" id="test4" class="accrMonth2">MONTH-3</th>
      <th data-column-id="accrMonth1" id="test5" class="accrMonth1">MONTH-2</th>
      <th data-column-id="accrMonth" id="test6" class="accrMonth">MONTH-1</th>
    </tr>
  </thead>
</table>

函数API调用，注意startDate值在ItemTbl结果更新时有效。当用户点击按钮时调用。

        $.ajax({
            type: "POST",
            url: getReviewById,
            data: JSON.stringify(form),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function (xhr) {
                xhr.setRequestHeader(csrfHeader, csrfToken);
            },
            success: function (jd) {
                setDatesSO(jd.startDate);
            },
        });

Answer 1

我没有看到您在我的示例中看到的错误

console.log($('#test1').hasClass("accrMonth2"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="OverviewTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
  <thead>
    <tr>
      <th data-column-id="accrMonth2" id="test1" class="accrMonth2">MONTH-3</th>
      <th data-column-id="accrMonth1" id="test2" class="accrMonth1">MONTH-2</th>
      <th data-column-id="accrMonth" id="test3" class="accrMonth">MONTH-1</th>
    </tr>
  </thead>
</table>

<table id="ItemTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
  <thead>
    <tr>
      <th data-column-id="accrMonth2" id="test4" class="accrMonth2">MONTH-3</th>
      <th data-column-id="accrMonth1" id="test5" class="accrMonth1">MONTH-2</th>
      <th data-column-id="accrMonth" id="test6" class="accrMonth">MONTH-1</th>
    </tr>
  </thead>
</table>

你确定你的表已经加载了吗？