[Solved] Css set size of elements in array dynamically [closed]

by


Taking your question literally and with an idea based on your limited markup:

jsFiddle DEMO

HTML 

<div id="box1" class="element"></div>
<div id="box2" class="element"></div>
<div id="box3" class="element"></div>

CSS 

.element {
  width: 50px;
  height: 50px;
  float: left;
  margin: 20px;
  border: 3px dashed black;
}

#box1 {
  background-color: red;
}

#box2 {
  background-color: blue;
}

#box3 {
  background-color: green;
}

JS 

$(document).ready(function() {

    // Grab all elements on the page with classname '.element'
    var myElements = $('.element');

    // These are the sizes we need to change dynamically.
    // As seen in jsFiddle CSS panel, the original height for the above classname is 50px;
    var sizeOfContent = [ "100", "200", "300"];

    // Here, we run a .each() iteration and use the zero indexed value to match the corrisponding height as provided in variable sizeOfContent.
    $(myElements).each(function(index) {

        // Activate the console.log to view results in the browers console.
        //console.log( this );

        // jQuery css will automatically use pixle value when not specified
        $(this).css('height', sizeOfContent[index]);

    });

});

solved Css set size of elements in array dynamically [closed]