Schleife über Array und zeigen Sie die entsprechende div

Question

Ich habe ein Array von Klassen, die mir aus einer Datenbank zurückgegeben werden. Etwas wie:

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

habe ich aa Seite, wo das Markup ist so etwas wie:

<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> 

Was ich versuche zu erreichen ist, was Klasse ist in meinem Array möchte ich die entsprechende div angezeigt werden . Ich kann Schleife über das Array und erhalten Sie den Wert mit .each Funktion, aber ich weiß nicht, wie man das mit der Div-Klasse und zeigen Sie es entsprechend.

Answer 1

einfach die Funktion jQuery .show() auf die Klassen bei jeder Iteration des .each().

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

Iterate über die Klassen und dann über jedes Element in dieser Klasse und Stil.

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. Schleife das Array und Wert als Selektor.