javascript - 如何拥有一个包含多个 div 的 div 它可能是 4-6-8 我如何使用 Jquery 在页面加载中适合它们

Question

如何拥有一个包含多个 div 的 div 它可能是 4-6-8 我如何使用 Jquery 在页面加载中适应它们。

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

我想创建一个 jquery 函数，它可以通过在页面加载时捕获它们的高度和宽度来使子 div 适合父 div。

Answer 1

我要试一试，希望我认为你想要的就是你真正想要的。我假设您想在页面加载时向元素中插入动态数量的<div class="box">元素。<div id="main">如果是这种情况，这应该有效：

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

演示