遍歷數組並顯示相應的div

Question

我有一個從數據庫返回給我的類的數組。喜歡的東西：

var styleClasses = ["ClassA", "ClassB", "ClassC", "ClassD"]; 

我有AA所在的頁面的標記是一樣的東西：

<div class="main-details"> 
      <div class="ClassA" style="display:none;"> 
       <div class="Inner-Details"> 

       </div> 
       <div class="Inner-Details"> 

       </div> 
      </div> 
      <div class="ClassB" style="display:none;"> 
       <div class="Inner-Details"> 

       </div> 
       <div class="Inner-Details"> 

       </div> 
      </div> 
      <div class="ClassC" style="display:none;"> 
       <div class="Inner-Details"> 

       </div> 
       <div class="Inner-Details"> 

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

我所試圖實現的是，無論類是在我的陣列我想要顯示相應的div 。我可以遍歷數組並獲取使用.each函數的值，但我不知道如何將它與div類匹配並相應地顯示它。

Answer 1

你.each()的每一次迭代只需使用jQuery函數.show()上的類。

var styleClasses = ["ClassA", "ClassB", "ClassC", "ClassD"]; 

$(styleClasses).each(function(){ 
    $('.'+this).show(); // does this: $('.classA').show(); 
}); 

JSFiddle Demo

Answer 2

var styleClasses = ["ClassA", "ClassB", "ClassC", "ClassD"]; 
styleClasses.forEach(function(class){ 
    Array.prototype.forEach.call(document.getElementsByClassName(class),function(el){ 
     el.style.display="block"; 
    }); 
}); 

遍歷類，然後在該類中的每一個元素，並添加樣式。

Answer 3

$(function(){ 
 
    var styleClasses = ["ClassA", "ClassB", "ClassC", "ClassD"]; 
 

 
    for (var i = 0; i < styleClasses.length; i++) { 
 
    $('.'+styleClasses[i]).show(); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main-details"> 
 
      <div class="ClassA" style="display:none;"> 
 
       <div class="Inner-Details"> 
 
ClassA 
 
       </div> 
 
       <div class="Inner-Details"> 
 

 
       </div> 
 
      </div> 
 
      <div class="ClassB" style="display:none;"> 
 
       <div class="Inner-Details"> 
 
ClassB 
 
       </div> 
 
       <div class="Inner-Details"> 
 

 
       </div> 
 
      </div> 
 
      <div class="ClassC" style="display:none;"> 
 
       <div class="Inner-Details"> 
 
ClassC 
 
       </div> 
 
       <div class="Inner-Details"> 
 

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

Answer 4

var styleClasses = ["ClassA", "ClassB", "ClassC", "ClassD"]; 
 
for (var i = 0; i < styleClasses.length; i++) { 
 

 

 
    $('.' + styleClasses[i]).show() 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main-details"> 
 
    <div class="ClassA" style="display:none;">1 
 
    <div class="Inner-Details"> 
 

 
    </div> 
 
    <div class="Inner-Details"> 
 

 
    </div> 
 
    </div> 
 
    <div class="ClassB" style="display:none;">2 
 
    <div class="Inner-Details"> 
 

 
    </div> 
 
    <div class="Inner-Details"> 
 

 
    </div> 
 
    </div> 
 
    <div class="ClassC" style="display:none;">3 
 
    <div class="Inner-Details"> 
 

 
    </div> 
 
    <div class="Inner-Details"> 
 

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

1. 環路陣列和使用它的值作爲選擇器。