获取 AJAX 请求后的 div 计数答案

【问题标题】：Get count of divs after AJAX request获取 AJAX 请求后的 div 计数
【发布时间】：2017-09-18 02:20:41
【问题描述】：

我有通过 AJAX 请求填充 div 的 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();
});

这是视图 HTML

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

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

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

【问题讨论】：

用带有 ID 问题的元素添加 html 标记

标签： javascript jquery html css asp.net

【解决方案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);
    }
  });
}

【讨论】：