javacriptで値を持つ表示されているすべての入力（非表示）をカウントします

Question

画像では、最初の列からの入力数を表示すると思われる最後の部分を除いて、各列に3つの入力があることがわかります。 panouri "であり、デフォルトでは隠されており、必要な場合にのみjavascriptで表示されます。私の場合は、最後の入力では、3番目の列には3つの入力があるので、番号3を取得する必要があります。

Inputs

HTMLコード：

<div class="input-group date col-xs-4" id="PanouriFinale"> 
     <label>Configurație panouri</label> 
     <input type="text" class="form-control centerElement" name="SuperiorPanel" id="SuperiorPanel" readonly style="display: none; border: 2px solid white;"> 
     <input type="text" class="form-control centerElement" name="Intermediar3Panel" id="Intermediar3Panel" readonly style="display: none; border: 2px solid white;"> 
     <input type="text" class="form-control centerElement" name="Intermediar2Panel" id="Intermediar2Panel" readonly style="display: none; border: 2px solid white;"> 
     <input type="text" class="form-control centerElement" name="Intermediar1Panel" id="Intermediar1Panel" readonly style="display: none; border: 2px solid white;"> 
     <input type="text" class="form-control centerElement" name="InferiorPanel" id="InferiorPanel" readonly style="display: none; border: 2px solid white;"> 
    </div> 

とJavaScript：

if (Height >= 1845 && Height <= 3000) 
     { 
      $.ajax({ 
       url: "includes/calculator/inferiorPanel.php", 
       data: { height: Height }, 
       type: 'POST', 
       cache: false, 
       success: function(result){ 
        $("#InferiorPanel").show().val(result); 
        $("#InferiorPanel2").show().val(result); 
        $("#PVInferior").show(); 
        $("#FInferior").show(); 
      }}); 

      $.ajax({ 
       url: "includes/calculator/Intermediar1Panel.php", 
       data: { height: Height }, 
       type: 'POST', 
       cache: false, 
       success: function(result){ 
        $("#Intermediar1Panel").show().val(result); 
        $("#Intermediar1Panel2").show().val(result); 
        $("#PVIntermediar1").show(); 
        $("#FIntermediar1").show(); 
      }}); 

      $.ajax({ 
       url: "includes/calculator/Intermediar2Panel.php", 
       data: { height: Height }, 
       type: 'POST', 
       cache: false, 
       success: function(result){ 
        if(result === '0') { 
         $("#Intermediar2Panel").hide(); 
         $("#Intermediar2Panel2").hide(); 
        } else 
        { 
         $("#Intermediar2Panel").show().val(result); 
         $("#Intermediar2Panel2").show().val(result); 
         $("#PVIntermediar2").show(); 
         $("#FIntermediar2").show(); 
        } 
      }}); 

      $.ajax({ 
       url: "includes/calculator/Intermediar3Panel.php", 
       data: { height: Height }, 
       type: 'POST', 
       cache: false, 
       success: function(result){ 
        if(result === '0') { 
         $("#Intermediar3Panel").hide(); 
         $("#Intermediar3Panel2").hide(); 
        } else 
        { 
         $("#Intermediar3Panel").show().val(result); 
         $("#Intermediar3Panel2").show().val(result); 
         $("#PVIntermediar3").show(); 
         $("#FIntermediar3").show(); 
        } 
      }}); 

      var InferiorPanel2 = document.getElementById('InferiorPanel2'); 
      var Intermediar1Panel2 = document.getElementById('Intermediar1Panel2'); 
      var Intermediar2Panel2 = document.getElementById('Intermediar2Panel2'); 
      var Intermediar3Panel2 = document.getElementById('Intermediar3Panel2'); 

      $.ajax({ 
       url: "includes/calculator/SuperiorPanel.php", 
       data: { height: Height }, 
       type: 'POST', 
       cache: false, 
       success: function(result){ 
      $("#SuperiorPanel").show().val(result); 
      $("#SuperiorPanel2").show().val(Height - InferiorPanel2.value - Intermediar1Panel2.value - Intermediar2Panel2.value - Intermediar3Panel2.value); 
      }}); 
      $("#PVSuperior").show(); 
      $("#FSuperior").show(); 
      var totalP = $('#PanouriFinale input').filter(function() { 
       return $(this).css('display') !== 'none'; 
      }).length; 
      $("#totalPanouri").val(totalP); 
      return false; 
     } else 
     { 
      document.getElementById('height').style.borderColor = "red"; 
      document.getElementById('erori').innerHTML = "<span style='color: red;'>Introdu o valoare cuprinsă între 1845 și 3000mm!</span>"; 
      return false; 
     } 

あなたが見ることができるように、すべての入力が隠されているが、JavaScriptで、必要なときに示したことになります。私が望むのは、「Configuratie panouri」という最初の列に表示されている目に見える入力の数を数え、最後の入力に表示することだけです。

Answer 1

私が正しくあなたの質問を理解している場合：

// Gets all inputs with class name 'centerElement' 
var inputsIWant = panouriFinale.getElementsByClassName('centerElement'); 
var inputsIWantLn = inputsIWant.length; 

var numberOfVisibleInputs = 0; 
for (var i = 0; i < inputsIWantLn; i++) { 

    // Goes through each input to see if display is set to none 
    if (inputsIWant[i].style.display == "none") { 
     numberOfVisibleInputs++; 
    } 
} 

// Logs the number of inputs that aren't hidden 
console.log(numberOfVisibleInputs);