jquery入れ子$ .eachパラメータを基にした要素（div）の表示と非表示

Question

私はリンクをクリックすると、idとshowのdiv要素が一部しか表示されません。

arrValuesのみELEMENTID 0と1の値を含み、
0でき隠す=の.css（ '表示'、 'なし'）である必要が
1 ELEMENTIDは=の.css（ '表示'、「表示される必要がありますブロック '）

 <!-- Box 1 --> 
     <div id="panelSomeName1" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#1">Box 1</a></h4> 
      </div> 
      <div id="1" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 2 --> 
     <div id="panelSomeName2" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#2">Box 2</a></h4> 
      </div> 
      <div id="2" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 3 --> 
     <div id="panelSomeName3" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#3">Box 3</a> 
       </h4> 
      </div> 
      <div id="3" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 4 --> 
     <div id="panelSomeName4" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#4">Box 4</a> 
       </h4> 
      </div> 
      <div id="4" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 5 --> 
     <div id="panelSomeName5" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#5">Box 5</a> 
       </h4> 
      </div> 
      <div id="5" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 6 --> 
     <div id="panelSomeName6" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#6">Box 6</a></h4> 
      </div> 
      <div id="6" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 

       </div> 
      </div> 
     </div> 

     <!-- Box 7 Box --> 
     <div id="panelSomeName7" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#7">Box 7</a></h4> 
      </div> 
      <div id="7" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

     <!-- Box 8 --> 
     <div id="panelSomeName8" class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"><a data-toggle="collapse" href="#8">Box 8</a> 
       </h4> 
      </div> 
      <div id="mb8" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        content 
       </div> 
      </div> 
     </div> 

    </div> 
</div> 

 
    $('#showOptions').on("click", function (e) {
 

var arrValues = '11110001'.split(''); 

    $.each(arrValues, function (intIndex, objValue) { 

     $("#panelBoxOptions").children("div").each(function() { 
     var _id = "#" + $(this).attr("id"); 

     console.log(intIndex +" " +_id + " " + objValue); 

     var dsplHide = (objValue != 0) ? $(_id).css('display', 'block') : $(_id).css('display', 'none'); 


     }); 
    }); 

    $('#panelBoxOptions').css('display', 'block'); 

}）;

この問題を解決するためには、正しい入れ子構造ですか？

ありがとうございます。あなたが別のループの内部ループ（each）を持っていたよう

I make a working example on jsfiddle

Answer 1

に見えます（したがって、非常に多くの行ではなく、わずか8のコンソールログに表示）、およびそれはへのすべての値を引き起こすように見えました1に戻ってください。This fiddleは、arrValuesをループする部分を削除し、現在のdivのintIndexがarrValuesで1または0であるかどうかを尋ねることによって機能するようです。関連する変更：

// .... 
var arrValues = '11110001'.split(''); 
$("#panelBoxOptions").children("div").each(function (intIndex) { 
    var _id = "#" + $(this).attr("id"); 
    var whichValue = arrValues[intIndex]; 
    var dsplHide = (whichValue != 0) ? $(_id).css('display', 'block') : $(_id).css('display', 'none'); 
}); 
// ....