隐藏divs没有val(ASP.NET MVC)

Question

我有ajax调用，我从后端获取数据并到达Divs。

这是我的ajax调用代码：

  $(document).ready(function() {
    question_block();
});
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>';
                count_blocks();
            }
        },
        error: function() {
            alert("Smth wrong in controller");
        }
    });
}

，但是某些块没有值。我需要隐藏它们

我如何通过javascript做到这一点？

谢谢。

Answer 1

您可以编写自己的功能以检查div是否为empty。

function isEmpty( el ){
  return !$.trim(el.html())
}
$('.hiddenQue').each(function(){
    if(isEmpty($(this)))
       $(this).hide();
});

Answer 2

附加内容后使用$('.hiddenQue:empty').hide()。

或者，修改您的逻辑，以便在QuestionX属性为空的地方不会创建DIV

Answer 3

我想我可以提出两个解决方案：第一个是如果没有数据，则不创建DIV，类似的内容：

email[i].Question2 ? 
'<div class="hiddenQue" style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' + email[i].Question2 + '</div>' : '' +

第二个是在DIV中添加一些类别的类别，该类别没有与第一个解决方案相同的数据。

Answer 4

您可以在question_block()方法后使用此代码$('.activeQue').find('.hiddenQue:empty').hide();。