Question

How can have a div which contain multiple multiple div it may 4-6-8 how can i fit them on page load using Jquery.

<div id="main">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

I want to create a jquery function which can fit child div to parent div by arresting their height and width on page load.

Answer 1

I’m going to take a stab, and hope that what I think you want is what you actually want. I assume you want to insert a dynamic number of <div class="box"> elements into the <div id="main"> element when the page has loaded. If that is the case, this should work:

HTML

<div id="main"></div>

jQuery

function createBoxes(numberOfBoxes) {
    var $box = $('<div/>').addClass('box');
    var $container = $('#main');
    for(var i = 1; i <= numberOfBoxes; i++) {
        $container.append($box.clone().text(i));   
    }
}

$(function() { // calls createBoxes() when the DOM is ready
               // shortened version of $(document).ready(function() {
    createBoxes(4);
});

DEMO