Hide Divs mit keinem Wert (ASP.NET MVC)

Question

Ich habe AJAX-Aufruf, wo ich Daten aus dem Back-End und divs bekommen.

Hier ist mein Code von AJAX-Aufruf:

$(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"); 
     } 
    }); 
} 

Aber einige Blöcke können keine Werte haben. Ich muss sie verstecken

Wie kann ich dies über Javascript tun?

Vielen Dank für Hilfe so sehr.

Answer 1

Sie können Ihre eigene Funktion schreiben, um zu überprüfen, ob divempty ist.

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

Answer 2

Nach dem Anhängen des Inhalts $('.hiddenQue:empty').hide() verwenden.

Alternativ ändern Sie Ihre Logik, so dass kein div wo die QuestionX Eigenschaft

leer erstellt

Answer 3

Ich glaube, ich zwei Lösungen vorschlagen können: Die erste div nicht zu erstellen, wenn es keine Daten für sie ist, so etwas wie dieses:

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

Das zweite ist etwas Klasse in den div, die wie in der ersten Lösung keine Daten auf die gleiche Art und Weise hat.

Answer 4

können Sie diesen Code $('.activeQue').find('.hiddenQue:empty').hide(); nach question_block() Methode verwenden.