时间戳

首页 > 解决方案 > 获取长度

  • 使用 Bootstrap 4 选项卡内容时

    • javascript - 获取长度
  • 使用 Bootstrap 4 选项卡内容时

    • 问题描述

    我有点坚持这一点。我正在尝试使用 Bootstrap 4 的选项卡内容获取列表的长度。由于选项卡在页面加载时未处于活动状态，因此长度为 0。当我打开选项卡时，它仍然为 0。

    我添加了打印的 html 以及 ajax 调用来获取数据。

    // print applicant status
if (applicantStatus == 'true') {
  $('#aStatus').html('Applicant');

  // video module count
  var totalModCount = $("#vidList").find("li").length;
  console.log(totalModCount); // 0 Supposed to be 9
  $('#totalCount').html(totalModCount)

  // form total count
  var totalFormCount = $("#vidList").find("li").length;
  console.log(totalFormCount); // 0 Supposed to be 4
  $('#formTotalCount').html(totalFormCount);
}
else {
  $('#aStatus').html('Employee');
};

var listOfTypes = "";
$.each(parsedData, function (index, item) {

  var dateOfCompletion = moment(item.DateCompleted).format('MM/DD/YYYY');
  lastAttempt = moment(item.DateOfExam).format('MM/DD/YYYY');
  isValid = item.Valid;
  isOrientation = item.IsOrientation;
  isInservice = item.IsInservice;

  if (applicantStatus == "true") {
    if (isOrientation) {
      if (isValid) {
        if (item.IsComplete == true) {
          listOfTypes += "<li class='list-group-item disabled videoItem text-success'><a class='video-btn gray' data-toggle='modal' data-src='" + item.URL
          listOfTypes += "' id='tID_" + item.TypeID + "' href='#myModal'>";
          listOfTypes += item.TypeName + "</a>";
          listOfTypes += "<br><p id='typeStatus' value='" + item.TypeID + "' class='completionDate'>Completed on: " + dateOfCompletion + "</p></li>";

        }
        else {
          listOfTypes += "<li class='list-group-item videoItem'><a class='video-btn' data-toggle='modal' data-src='" + item.URL
          listOfTypes += "' id='tID_" + item.TypeID + "' href='#myModal'>";
          listOfTypes += item.TypeName + "</a>";
          listOfTypes += "<br><p id='typeStatus' value='" + item.TypeID + "' class='timeDuration'>Time Duration: " + item.Duration + "</p></li>";
        }
      }
      else {
        listOfTypes += "<li class='list-group-item d-none videoItem'><a class='video-btn' data-toggle='modal' data-src='" + item.URL
        listOfTypes += "' id='tID_" + item.TypeID + "' href='#myModal'>";
        listOfTypes += item.TypeName + "</a>";
      }
    }
  }
});

    <div class='tab-content'>
  <div id="videoList" class="tab-pane fade">
    <ul class='list-group' id='vidList'>
      <li class="list-group-item videoItem"></li>
      <li class="list-group-item videoItem"></li>
      <li class="list-group-item videoItem"></li>
      <li class="list-group-item videoItem"></li>
      <li class="list-group-item videoItem"></li>
      <li class="list-group-item videoItem"></li>
    </ul>
  </div>
  <div id="formsList" class="tab-pane fade">
    <ul class='list-group' id='fList'>
      <li class="list-group-item formItem"></li>
      <li class="list-group-item formItem"></li>
      <li class="list-group-item formItem"></li>
      <li class="list-group-item formItem"></li>
    </ul>
  </div>
</div>

    标签： javascripthtmljquerybootstrap-4

    解决方案

    如果调用是异步的，则需要在加载选项卡后进行检查。因此，将下面的代码及其各自的函数放入异步调用的回调函数中并检查。

    var totalModCount = $("#vidList").find("li").length;

    在那之前它将是空的。

    推荐阅读