javascript - 在 AJAX 请求后获取 div 的计数

Question

我有 div，我通过 AJAX 请求用 div 填充

$(document).ready(function() {
    question_block();
    count_blocks();        
});

function question_block() {
    $.ajax({
        url: '@Url.Action("QuestionBlocks", "Interwier")',
        contentType: 'application/json; charset=utf-8',
        type: 'GET',
        dataType: 'json',
        processData: false,
        success: function(result) {
            var email = result;
            for (var i = 0; i <= email.length - 1; i++) {
                var question =
                    '<div class="activeQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question1 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question2 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question3 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question4 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question5 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question6 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question7 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question8 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question9 +
                        '</div>' +
                        '<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' +
                        email[i].Question10 +
                        '</div>';
                $("#questions").append(question);
            }
        },
        error: function() {
            alert("Smth wrong in controller");
        }
    });
}

我需要计算父 div 中的 div。我编写这段代码来获取所有 div 的数量:

function count_blocks() {       
  var length = $("#questions > div").length;
  alert(length);
}

我这样打电话

$(document).ready(function() {
    question_block();
    count_blocks();
});

这是 View HTML

<div id="questions" class="qustion-div-one" style="position: relative;"></div>

我的问题是，当我运行 View 时，我收到 length = 0

的警报

我需要如何正确运行 count_blocks 函数？

Answer 1

问题是因为 AJAX 请求是异步的。这意味着当您调用 count_blocks() 时页面加载时页面中没有任何内容。要解决此问题，您需要在 $.ajax 的 success 回调中调用该函数，如下所示:

$(document).ready(function() {
  question_block();
});

function question_block() {
  $.ajax({
    // settings here...
    success: function(result) {
      // build html...
      $("#questions").append(question);

      count_blocks(); // call here instead
    },
    error: function(x, s, e) {
      console.dir(x);
      console.log(s);
      console.log(e);
    }
  });
}