CODEWITHSUNDEEP
javascriptjqueryhtmlarrays
Izzy
Izzy

Reputation: 6866

Loop over array and show the appropriate div

I have an array of classes which are returned to me from a database. Something like:

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

I have a a page where the markup is something like:

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

What I am trying to achieve is, whatever class is in my array I want the appropriate div to be displayed. I can loop over the array and get the value using .each function but I don't know how to match that with the div class and show it accordingly.

Upvotes: 1

Views: 115

Answers (4)

Jeff Noel
Jeff Noel

Reputation: 7618

Just use the jQuery function .show() on the classes at each iteration of your .each(). 

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

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

JSFiddle Demo

Upvotes: 2

guradio
guradio

Reputation: 15555

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. Loop the array and use it value as selector.

Upvotes: 1

XYZ
XYZ

Reputation: 4480

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

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138257

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

Iterate over the classes and then over each element in that class and add the style.

Upvotes: 1

Related Questions