获取长度<li>使用 Bootstrap 4 选项卡内容时</li>

Question

我有点坚持这一点。 我正在尝试使用 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>

Answer 1

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

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

在那之前它将是空的。

Answer 2

我想这些列表是从 ajax 调用加载的？ 在这种情况下，您输入的代码必须在调用成功的回调中执行

$ajax({
    url : '',
    type: ...,
    success : function(response) {
    // add the <li> </li> AND THEN DO THE COUNT
    var totalModCount = $("#vidList").find("li").length;
    }

})

Answer 3

这是我必须做的才能让它工作。

感谢大家的帮助。 我相信我的解释非常混乱，但您的意见帮助我找到了答案。

var completedCount = parsedData.filter(function (item) {
  if (item.Valid == true) {
    return item.IsComplete
  }
}).length;
$('#completionCount').html(completedCount);

// totalCount
var totalCount = parsedData.filter(function (item) {
  if (item.IsOrientation == true && item.Valid == true) {
    return item.IsOrientation
  }
}).length;
$('#totalCount').html(totalCount);