使用jquery附加的样式元素

Question

I have div elements that are appended on a parent div. Depending on the screen size, the div elements should resize but my efforts to do so using jquery .css() are failing all through. Kindly help. Below is a sample of my code

var len = data.length; //a number comes here
var i;
for(i=1;i<len+1;i++){
    $(".app-body").append(
       "<div class='list-box' onclick='OpenHymn("+ i +")'>" +
       "<div class='circle-text'><div class='hym_num'>" + i + "</div></div>" +
       "</div>");
}
//calling the function that should resize the divs
GridBoxes();

function GridBoxes(){
    var width=window.innerWidth;
    var divisible=parseInt(width-40);
    var size=divisible/4;
    var boxes=$('.list-box');
    boxes.css("width",size+"px");
    boxes.css("height",size+"px");

}

Answer 1

Put the function inside $(window).resize() for it to fire everytime the window is resized

Code:

$(window).resize(function() {
  GridBoxes();
})

Example

You should really use media query's for this kind of problem.

Answer 2

try this

 window.addEventListener("resize", GridBoxes);//called on window resize var len = 4; //changed to a number here for testing var i; for(i=1;i<len+1;i++){ $(".app-body").append( "<div class='list-box' onclick='OpenHymn("+ i +")'>" + "<div class='circle-text'><div class='hym_num'>" + i + "</div></div>" + "</div>"); } //calling the function that should resize the divs //GridBoxes(); function GridBoxes(){ var width=window.innerWidth; var divisible=parseInt(width-40); var size=divisible/4; var boxes=$('.list-box'); for(var b=0;b<boxes.length;b++){ boxes[b].css("width",size+"px"); boxes[b].css("height",size+"px"); } } 

 .list-box{border:1px solid red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="app-body"></div>